Jquery multi DIVs hide/show

Question

i want to show hide multiple divs with jquery or javascript. I seached the web but i find codes that must have unique divs like:

<div id="div1">text</div>
<div id="div2">text</div>

and so on, but i want to add the divs in a foreache php function so i can't have multiple IDs, the foreache is a div wrapper. So, my question is how can i do that ?

EDIT Because i am complete noob at JQuery i don't know how to implement anything, so i have this

    <div id="wrapper">
  <div class="title">
     <div class="hide"> Hidden Text</div>
  </div>
    </div>

When i click the title div, i want the class="hide" to be shown.

Solution:

    .box
{ margin:10px;
  height:auto;
}
.panel,.flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel
{
padding:50px;
display:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".flip").click(function(){
    $(this).next().slideToggle(500);
  });
});
</script>

<div class="box">
     <h1>This is the div</h1>
  <div class="flip">If u click </div>
<div class="panel"> This will show</div>

The problem was as i said the div were generated by the foreach function and this solved it, Thanks to all ! I have much to learn.

Answer 1

You can try

<div id="div1" class="toggle">text</div>
<div id="div2" class="toggle">text</div>

Then

$('.toggle').toggle();  //Automatic Display or hide the matched elements.

Answer 2

You can assign common class and later use that class selector to show hide divs with common class.

Live Demo

<div id="div1" class="someclass">text</div>
<div id="div2" class="someclass">text</div>

 $('.someclass').show();

Answer 3

there are two ways of doing it:

• select divs by class
• select children div of the wrapper

The first method is like everyone else described, add the class attribute to select the divs:

<div class="hide">content</div>

and

$(".hide").hide();

The second method is to give the parent div an unique id:

<div id="wrapper">
    <div>content</div>
    <div>content</div>
</div>

then select all it's children by tag name:

$("#wrapper div").hide();

Answer 4

Add some class to select all dives to hide,

<div class="toHide" id="div1">text</div>
<div class="toHide" id="div2">text</div>

And then hide them all ,

$('div .toHide').hide();

Answer 5

Solution 1

<div id="div1">text</div>
<div id="div2">text</div>

jQuery('#div1, #div2').hide();
jQuery('#div1, #div2').show();
jQuery('#div1, #div2').toggle();

Solution 2

<div id="div1" class="some-div">text</div>
<div id="div2" class="some-div">text</div>

jQuery('.some-div').hide();
jQuery('.some-div').show();
jQuery('.some-div').toggle();

Answer 6

Another answer:

Use the parent element:

<div id="yourId">
   <div id="div1">text</div>
   <div id="div2">text</div>
</div>

$("#yourId div").hide();