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!
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..
//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");
});
});
});
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.
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..
<!--- row --->
<div id="1_row" class="fp_row clearfix" rel="1">
<!--- time --->
<div class="fp_col fp_col_time"><p>the time</p></div>
<!--- title --->
<div class="fp_col fp_col_title"><p>the title</p></div>
</div>
<!--- hidden information --->
<div id="1_hide" rel="1" class="fp_dropdown_box clearfix" style="<cfif qEvents.event_id EQ url.event_id>display:;<cfelse>display:none</cfif>" >
<div class="fp_dropdown_content"><p>the hidden information</p></div>
</div>
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..
Updated 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");
}
});
});
});
this is my final edit, I think this was the cleanest way
$(document).ready(function() {
$('div.cont > div').hide();
$('div.cont> h3').click(function() {
$(this).next('div').slideToggle('fast').siblings('div:visible').slideUp('fast');
});
});
The problem is just that you hide them all, then toggle the clicked one – so it will always be shown. You need to detect whether it’s shown or not and act appropriately.