show/hide multiple hide buttons-CodePudding

is it possible to make this show/hide script work with multiple hide buttons or something similar? id="cv_cont should stay visible by default.

HTML

<button id="show_cv">Show</button>
<button id="hide_cv">Hide 1</button>
<button id="hide_cv">Hide 2</button>
<button id="hide_cv">Hide 3</button>
<button id="hide_cv">Hide 4</button>
<div id="cv_cont">Content Visible</div>

JavaScript

$("#hide_cv").click(function() {
    $("#cv_cont").hide();
});

$("#show_cv").click(function() {
    $("#cv_cont").show();
});

Original Location of the script. jQuery - failed show/hide buttons

CodePudding user response：

The first problem here is all the hide buttons have the same ID's value, you can fix that by give them the same class's value and call it on the JavaScript code.
The correct code will like this :

<!DOCTYPE html>
<html lang="fr">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <button class="show_cv">Show</button>
<button class="hide_cv">Hide 1</button>
<button class="hide_cv">Hide 2</button>
<button class="hide_cv">Hide 3</button>
<button class="hide_cv">Hide 4</button>
<div id="cv_cont">Content Visible</div>
  <script>
    $(".hide_cv").click(function() {
    $("#cv_cont").hide();
});

$(".show_cv").click(function() {
    $("#cv_cont").show();
});
  </script>
</body>
</html>