CODEWITHSUNDEEP
htmljqueryaccordion
amyvl
amyvl

Reputation: 51

How to close div on second click?

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/

Upvotes: 1

Views: 2540

Answers (8)

Sharma Ji
Sharma Ji

Reputation: 1

 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>

Upvotes: 0

user4516557
user4516557

Reputation:

It can be done as simple as this!! Cheers..

jQuery(document).ready(function($){ 
    $(".desc_div").hide();
    $(".open_div").click(function(){ 
        $(this).next().slideToggle("slow"); 
    });
});

Upvotes: 1

Anthony Carbon
Anthony Carbon

Reputation: 618

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");
    }

});
});

enter image description here

DEMO FIDDLE

Upvotes: 0

Shan
Shan

Reputation: 475

<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>

Upvotes: 1

errand
errand

Reputation: 980

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

Upvotes: 0

Khaja Md Sher E Alam
Khaja Md Sher E Alam

Reputation: 906

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">

Upvotes: 1

Markus Schott
Markus Schott

Reputation: 113

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.

Upvotes: 4

collab-with-tushar-raj
collab-with-tushar-raj

Reputation: 1287

FIDDLE: 

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

Upvotes: 0

Related Questions