CODEWITHSUNDEEP
htmljqueryshow-hide
sasa
sasa

Reputation: 3

Separate show/hide jquery?

I have a problem with a collapsible jquery code.

I'd like to separate some DIVs, but if I click on an element, whichever that is, it opens all of the other elements as well. I have to use more than of these collapsible things (aprox. 40 pieces because there are a lot of versions in one page and I have to save some place). I would like to know how to separate the DIVs from one another. Here is my code:

<script type="text/javascript"
 src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
 $(document).ready(function() {
  $(".flip").click(function() {
   $(".panel").slideToggle("slow");
  });
 });
</script>

<style type="text/css">
div.panel,p.flip {
 margin: 0px;
 padding: 5px;
 text-align: center;
 background: #FFCFF9;
 border: solid 1px #fff;
}

div.panel {
 widht: 50%;
 height: 100px;
 display: none;
}
</style>
</head>
 <div class="panel" id="1">
  <p>Fist panel text</p>
 </div>
 <p class="flip" id="1">1st version</p>
 <div class="panel" id="2">
  <p>Second panel text</p>
 </div>
 <p class="flip" id="2">2nd version</p>

At first I tried this: http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm But there was a problem as well; it only shows the content of the first DIV, the rest won't come down. I don't know if I should name the DIVs (as you can see in the code, I've tried that) or not, but if I do, I don't know what's the proper way to do it. Please help me out if you can. Thank you!

Upvotes: 0

Views: 101

Answers (3)

Petre Ionescu
Petre Ionescu

Reputation: 194

First of all, I'd like to remind you that ids need to be unique. In your example there are two elements with id="1" and two with id="2".

You could also wrap each panel / flip combo inside a container div.

Html:

<div class="panelContainer">
   <div class="panel">
      <p>Fist panel text</p>
   </div>
   <p class="flip" id="1">1st version</p>
</div>
<div class="panelContainer">
   <div class="panel" id="2">
      <p>Second panel text</p>
   </div>
   <p class="flip" id="2">2nd version</p>
</div>

In your js you put a click function for each element with class "flip" to toggle all elements with class "panel".

What you want to do is toggle the panel that corresponds to the flip that was clicked.

Js:

<script type="text/javascript">
  $(document).ready(function() {
     $(".flip").each(function(){
        $(this).click(function() {
               $(this).closest(".panelContainer").find(".panel").slideToggle("slow");
            });
         });
       });
    </script>

Haven't tested the code, but you should get the general idea.

Upvotes: 0

Bobby Chowdhury
Bobby Chowdhury

Reputation: 334

try this:

<script type="text/javascript">
  $(document).ready(function() {
    $(".flip").click(function() {
      $(this).next(".panel").slideToggle("slow");
    });
  });
</script>

Upvotes: 0

David Jones
David Jones

Reputation: 4305

Here is a JS fiddle with a working version.

https://jsfiddle.net/b3bc4yk6/

The main reason your code was not working is you were not targeting the div you want to expand/contract, you were targeting them all. As you can see from the HTML I have given each panel their own ID.

<div class="panel" id="panel-1">
  <p>Fist panel text</p>
 </div>
 <p class="flip" id="1">1st version</p>
 <div class="panel" id="panel-2">
  <p>Second panel text</p>
 </div>
 <p class="flip" id="2">2nd version</p>

Also note that an ID should be unique so a flip element and a panel element should not have the same ID.

Now in the jquery we can grab the ID of the flip and target the specific panel.

$(document).ready(function() {
  $(".flip").click(function() {
   $("#panel-" + $(this).attr('id')).slideToggle("slow");
  });
 });

Hope that helped!

Upvotes: 1

Related Questions