Show multiple divs on button click

Question

Firstly i would say sorry because my english isn't so good but i will try my best. So i will explain you my problem, i would like to show all my divs when the users click on a button. It's really complicate for me becase there is a lot of id. It's like a drop menu.

My code :

$("#content_caract_1").hide();
$("#content_caract_2").hide();
$("#content_caract_3").hide();
$("#content_caract_4").hide();
$('#btnd').click(function() { // Au clic sur un élément
  $(".forbutton").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1').click(function() { // Au clic sur un élément
  $("#content_caract_1").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1bis').click(function() { // Au clic sur un élément
  $("#content_caract_1bis").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1bis2').click(function() { // Au clic sur un élément
  $("#content_caract_1bis2").toggle(400); // chache ou affiche a une vitesse constante (400)
});
$('#caract1bis3').click(function() { // Au clic sur un élément
  $("#content_caract_1bis3").toggle(400); // chache ou affiche a une vitesse constante (400)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnp" value="Tout plié">
<input type="button" id="btnd" value="Tout déplié">
<div id="caract1">
  <h2>Etape 1 : Les enjeux et le parcours</h2>
</div>
<div class="forbutton">
  <div id="content_caract_1">
    <p>Equitis Romani autem esse filium criminis loco poni ab accusatoribus neque his iudicantibus oportuit neque defendentibus nobis. Nam quod de pietate dixistis, est quidem ista nostra existimatio, sed iudicium certe parentis; quid nos opinemur, audietis
      ex iuratis; quid parentes sentiant, lacrimae matris incredibilisque maeror, squalor patris et haec praesens maestitia, quam cernitis, luctusque declarat.</p>
    <div id="caract1bis">
      1.1 Enjeux du programme Appolo</br>
    </div>
    <div id="content_caract_1bis">
      <p>test</p>
    </div>
    <div id="caract1bis2">
      1.2 Retour d'experience</br>
    </div>
    <div id="content_caract_1bis2">
      <p>test</p>
    </div>
    <div id="caract1bis3">
      1.3 Votre parcours
    </div>
    <div id="content_caract_1bis3">
      <p>test</p>
    </div>
  </div>
</div>

There is 4 block like this, i would like to click on the button et show all the things inside the block.

Thanks to you had read me ! If you need more precision, im here to answer.

Thanks Nico

Answer 1

$("#content_caract_1").find("div").hide();

$('#btnp').click( function() { // Au clic sur un élément
$("#content_caract_1").find("div").show();// chache ou affiche a une vitesse constante (400)
    });


$('#btnd').click( function() { // Au clic sur un élément
$("#content_caract_1").find("div").hide();// chache ou affiche a une vitesse constante (400)
    });

Answer 2

You could assign a class to everything you need to be "toggable"

<div class="toggable">
  one
</div>
<div class="toggable">
  two
</div>

<button id="hide-stuff">
  toggle
</button>

Then catch the all in one call like this

$('#hide-stuff').click(function() {
    $('.toggable').toggle();
})

Answer 3

You are toggling your parent div on button click and hiding all its children on page load. Just toggle parent div on page load.

<script>
$(".forbutton").hide();

//$("#content_caract_1").hide();
//$("#content_caract_2").hide();
//$("#content_caract_3").hide();
//$("#content_caract_4").hide();
$('#btnd').click( function() { // Au clic sur un élément
$(".forbutton").toggle(400);// chache ou affiche a une vitesse constante (400)
    });
$('#caract1').click( function() { // Au clic sur un élément
$("#content_caract_1").toggle(400);// chache ou affiche a une vitesse constante (400)
    });
    $('#caract1bis').click( function() { // Au clic sur un élément
    $("#content_caract_1bis").toggle(400);// chache ou affiche a une vitesse constante (400)
        });
    $('#caract1bis2').click( function() { // Au clic sur un élément
    $("#content_caract_1bis2").toggle(400);// chache ou affiche a une vitesse constante (400)
        });
    $('#caract1bis3').click( function() { // Au clic sur un élément
    $("#content_caract_1bis3").toggle(400);// chache ou affiche a une vitesse constante (400)
});