Databases
StackOverflow2013
Postsdbo
POJquery: Slideup all, Slide down which is clicked - if clicked is already open toggle it.. Need help on last bit, please
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery: Slideup all, Slide down which is clicked - if clicked is already open toggle it.. Need help on last bit, please
    text
    copied!<p>I'm still quite new with jQuery, I know that I could "google" and have something very similar up and running in 5 mins, but I'm learning - I need to make the mistakes and ask!</p> <p>I was sure this should work but the last step didn't.. If someone has a way of creating this effect or knows how to clean-up my code it would be much appreciated but more so if someone could tell me where I have gone wrong..</p> <pre><code> //intial load $(document).ready(function(){ // row has been clicked $(".fp_row").bind('click', function(){ //row id has been set to item_clicked var item_clicked = $(this).attr('rel'); //Item_hidden is the div that shows or hides, like accordion menu var item_hidden = $("#" + item_clicked + "_hide").attr('rel'); //hide all that are open, and then toggle the one you clicked.. $(".fp_dropdown_box").slideUp("slow", function(){ $("#" + item_hidden + "_hide").not(".fp_dropdown_box").slideToggle("slow"); }); }); }); </code></pre> <p>I'm making a page with rows of headlines, when you click a row a div slides out revealing more information, just like an accordion. I can currently make the box you click on open and all others close. I can make all open at once and close at once.. But I am having problems making one open then if you click it again it closes,currently It slides up and then down again.</p> <p>How I thought the code above worked.. On initial load, when a row is clicked grab the rel value (which is what I'm using for a unique identifier for each row) then slide-up all rows that are currently open but not the one you have clicked on toggle slide this..</p> <pre><code>&lt;!--- row ---&gt; &lt;div id="1_row" class="fp_row clearfix" rel="1"&gt; &lt;!--- time ---&gt; &lt;div class="fp_col fp_col_time"&gt;&lt;p&gt;the time&lt;/p&gt;&lt;/div&gt; &lt;!--- title ---&gt; &lt;div class="fp_col fp_col_title"&gt;&lt;p&gt;the title&lt;/p&gt;&lt;/div&gt; &lt;/div&gt; &lt;!--- hidden information ---&gt; &lt;div id="1_hide" rel="1" class="fp_dropdown_box clearfix" style="&lt;cfif qEvents.event_id EQ url.event_id&gt;display:;&lt;cfelse&gt;display:none&lt;/cfif&gt;" &gt; &lt;div class="fp_dropdown_content"&gt;&lt;p&gt;the hidden information&lt;/p&gt;&lt;/div&gt; &lt;/div&gt; </code></pre> <p>Ok so after the comments, I managed to get the script to somewhat work - the only problem left is that it opens then closes twice before stopping at the state I want it to be..</p> <p>Updated Code.</p> <pre><code> //intial load $(document).ready(function(){ // row has been clicked $(".fp_row").bind('click', function(){ //The Id of the clicked Row var item_clicked = $(this).attr('rel'); console.log("The ID of the clicked Row: (" + item_clicked + ")"); //Creates variable ID for the hidden item var item_hidden = $("#" + item_clicked + "_hide").attr('rel'); console.log("The Hidden Item ID (" + item_hidden + ")"); //Creates variable to test if the hidden item is true or false. var item_is_hidden = $("#" + item_hidden + "_hide").css('display') == 'none'; console.log("test if hidden item is hidden (" + item_is_hidden +")"); //slide up all that are open $(".fp_dropdown_box").slideUp("slow", function(){ //test to see if it is open: true/false if(item_is_hidden) { console.log("condition worked!"); //Run the slidedown on hidden item $("#" + item_hidden + "_hide").slideDown("slow"); } else { $("#" + item_hidden + "_hide").slideUp("slow"); } }); }); }); </code></pre> <hr> <p>this is my final edit, I think this was the cleanest way</p> <pre><code>$(document).ready(function() { $('div.cont &gt; div').hide(); $('div.cont&gt; h3').click(function() { $(this).next('div').slideToggle('fast').siblings('div:visible').slideUp('fast'); }); }); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload