Witam,
Jestem początkujący
piszę sobie małą aplikację do dodawania, wyświetlania i usuwania filmów. Obecnie to wygląda tak jak wysłałem na załączniku. Kiedy wcisnę przycisk hide lub show list to znika lub pojawia się sama treść tabeli Movie List (tak jak na zdjęciach) i moje pytanie brzmi jest jakiś sposób żeby znikała całość? tzn razem z przyciskami Delete , Details tytułami pól itp.
Druga sprawa to przyciski detatails. Chciałbym żeby docelowo wyświetlała się sama lista tytułów a dopiero po kliknięciu Details - reszta szczegółów filmu
I ostatnia rzecz - obecnie mam dwa przyciski osobno hide i show, a jak mogę zrobić tylko jeden przycisk który pokaże listę kiedy jej nie ma i schowa kiedy jest ?
mój plik html wygląda obecnie tak:
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CRUD</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i&subset=latin-ext" rel="stylesheet">
</head>
<body>
<!--<h1 class="movies-heading movies-heading--main">Movies App</h1>-->
<main class="crud container">
<section class="datatable">
<h2>Add a new movie</h2>
<form
class="datatable__row datatable__row--add"
method="POST"
action="http://localhost:8080/v1/movie/createMovie"
data-movie-add-form
>
<fieldset class="datatable__row-section datatable__row-section--input-section">
<label class="datatable__input-label">
Movie's title
</label>
<input type="text" name="title" placeholder="Insert movie's title" required minlength="1">
</fieldset>
<fieldset class="datatable__row-section datatable__row-section--input-section">
<label class="datatable__input-label">
Movie's author
</label>
<textarea name="author" placeholder="Insert movie's author" required minlength="1"></textarea>
</fieldset>
<fieldset class="datatable__row-section datatable__row-section--input-section">
<label class="datatable__input-label">
Movie's genre
</label>
<textarea name="genre" placeholder="Insert movie's genre" required minlength="1"></textarea>
</fieldset>
<fieldset class="datatable__row-section datatable__row-section--input-section">
<label class="datatable__input-label">
Movie's production year
</label>
<textarea name="production" placeholder="Insert movie's production year" required minlength="1"></textarea>
</fieldset>
<fieldset class="datatable__row-section datatable__row-section--button-section">
<button type="submit" data-movie-add-button class="datatable__button">Add a movie</button>
<button id="hide"
class="datatable__button">Hide List</button>
<button id="show"
class="datatable__button">Show List</button>
</fieldset>
</form>
</section>
<p>
<section class="datatable">
<h2>Movies list</h2>
<div class="datatable__movies-container" data-movies-container></div>
</section>
</main>
<div class="template" data-datatable-row-template>
<form class="datatable__row" data-movie-id="0">
<fieldset class="datatable__row-section datatable__row-section--input-section" data-movie-title-section>
<label class="datatable__input-label">
Movie's title
</label>
<input type="text" name="title" placeholder="Insert a new movie name" data-movie-name-input required minlength="1">
<p class="datatable__field-value" data-movie-title-paragraph></p>
</fieldset>
<fieldset class="datatable__row-section datatable__row-section--input-section" data-movie-author-section>
<label class="datatable__input-label">
Movie's author
</label>
<textarea name="title" placeholder="Insert new movie author" data-movie-author-input required minlength="1"></textarea>
<p class="datatable__field-value" data-movie-author-paragraph></p>
</fieldset>
<fieldset class="datatable__row-section datatable__row-section--input-section" data-movie-genre-section>
<label class="datatable__input-label">
Movie's genre
</label>
<textarea name="title" placeholder="Insert new movie genre" data-movie-genre-input required minlength="1"></textarea>
<p class="datatable__field-value" data-movie-genre-paragraph></p>
</fieldset>
<fieldset class="datatable__row-section datatable__row-section--input-section" data-movie-production-section>
<label class="datatable__input-label">
Movie's production year
</label>
<textarea name="title" placeholder="Insert new movie production year" data-movie-production-input required minlength="1"></textarea>
<p class="datatable__field-value" data-movie-production-paragraph></p>
</fieldset>
<fieldset class="datatable__row-section datatable__row-section--button-section">
<button id="hide"
class="datatable__button">Hide Details</button>
<button id="show"
class="datatable__button">Show Details</button>
<button type="button" data-movie-delete-button class="datatable__button">Delete</button>
</fieldset>
</form>
</div>
</p>
<script src="jquery-3.2.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Z góry dziękuje za pomoc