CODEWITHSUNDEEP
phpjavascriptjquery
Cosmin Stan
Cosmin Stan

Reputation: 23

Jquery multi DIVs hide/show

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.

Upvotes: 0

Views: 635

Answers (6)

ThdK
ThdK

Reputation: 10566

Another answer:

Use the parent element:

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

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

Upvotes: 0

SparK
SparK

Reputation: 5211

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();

Upvotes: 1

Adil
Adil

Reputation: 148150

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();

Upvotes: 3

Ron
Ron

Reputation: 1336

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();

Upvotes: 0

Baba
Baba

Reputation: 95131

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.

Upvotes: 5

Jayantha Lal Sirisena
Jayantha Lal Sirisena

Reputation: 21376

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();

Upvotes: 0

Related Questions