How to close div on second click? - html

Question

When you click on 'financial roadshows' for example, it opens. But when I click again, it closes temporarily and then opens again. I tried looking for the answer, but I'm just a gigantic noob when it comes to this one. I hope someone can help me out!
This is the code I used:
$(document).ready(function(){
$(".desc_div").slideUp();
$(".open_div").click(function(){
wrapper = $('#services_blocks'),
link = $(this);
$('.open_div.selected').next(".desc_div").slideUp('slow', function() {
$(this).prev().removeClass('selected');
});
link.addClass("selected").next(".desc_div").slideDown("slow");
});
});
and here is my JSfiddle:
http://jsfiddle.net/59f29b1L/

Answer 1

This can be done much easier with jQuery's slideToggle.
http://api.jquery.com/slidetoggle/
$(".open_div").click(function(){
$(this).next(".desc_div").stop().slideToggle( "slow" );
});
Try it out: http://jsfiddle.net/59f29b1L/6/
To fire the click event only once take a look at this answer.

Answer 2

<script>
$(document).ready(function(){
$(".desc_div").slideUp();
$(".open_div").click(function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected');
$(this).addClass("selected").next(".desc_div").slideUp("slow", function() {
$(this).prev().removeClass('selected');
});
}
else{ $(this).addClass("selected").next(".desc_div").slideDown("slow");
}
});
});
</script>

Answer 3

Fiddle : jsfiddle
The drop down works here , hope it helps.
Changes :
$('.open_div.selected').next(".desc_div.down").slideUp('slow', function() {
$(this).prev().removeClass('selected');
$(this).removeClass('down').addClass('up');
});
link.addClass("selected").next(".desc_div.up").slideDown("slow", function() {
$(this).removeClass('up').addClass('down');
});
and also added a class in the html
<div class="desc_div up">

Answer 4

It can be done as simple as this!! Cheers..
jQuery(document).ready(function($){
$(".desc_div").hide();
$(".open_div").click(function(){
$(this).next().slideToggle("slow");
});
});

Answer 5

FIDDLE:
$('.open_div').click(function(){
$('.desc_div').toggle().toggleClass('selected');
});

Answer 6

i changed your fiddle over here: http://jsfiddle.net/59f29b1L/8/
first of all, you have to change the html.
make all open_divs wrap around your desc_div.
then use this code:
$(document).ready(function () {
$(".desc_div").hide(); // this is used to initally hide all desc_div
$(".open_div").click(function () { // define the click function
$(".desc_div", this).stop().slideToggle("slow"); //slide up/down depending on current state
});
});
you can change the line
$(".desc_div").hide();
to
$(".desc_div:gt(0)").hide();

Answer 7

Updated script of yours brother. I only add few changes on slide up script. Hope this will help.
$(document).ready(function(){
$(".desc_div").slideUp();
$(".open_div").click(function(){
wrapper = $('#services_blocks'),
link = $(this);
$('.open_div.selected').next(".desc_div").slideUp('slow', function() {
$(this).prev().removeClass('selected');
});
if($(this).next(".desc_div").css('display')=='none'){
link.addClass("selected").next(".desc_div").slideDown("slow");
}
});
});
DEMO FIDDLE

Answer 8

On One click of button, it shows the div and on another click it hides the div.
<button type="button" id="first">Click Me!</button>
<div id="something">Something</div>
<script>
$(document).ready(function(){
$('#something').hide();
$prevIndex = 0;
$i = 0;
$('#first').click(function(){
var index = $('#first').index($(this));
if(index == $prevIndex)
{ // if same
$i = $i;
}else{ // if not same
$i = 0;
}
if ($i % 2 === 0) {
/* we are even */
/* do first click */
$('#something').show();
} else {
/* we are odd*/
/* do second click */
$('#something').hide();
}
$i++;
$prevIndex = index;
});
});
</script>