jQuery toggle( ) between two functions not working

Question

ok so here is my code

HTML:

<div id="cta-end"><h1>Modification</h1></div>
<div id="bloc1"></div>
<div id="bloc2"></div>

CSS:

#cta-end
{
    width:100%;
    background-color:red;
    text-align:center;
}

#cta-end:hover
{
    cursor:pointer;
}

#bloc1, #bloc2
{
    width: 100%;
    height: 50px;
    margin: 5px 0;
    display:none;
}

#bloc1{
    background-color:blue;
}
#bloc2{
    background-color:grey;
}

and jQuery :

$(document).ready(function(){


    $('#cta-end').click(function(){   
          $('#cta-end').toggle(function () {
               $('#bloc1').css({"display":"block"});
               $('#bloc2').css({"display":"block"});
            },
               function () {
                  $('#bloc1').css({"display":"none"});
                  $('#bloc2').css({"display":"none"});
               }
               );
         });

   });

What I am trying to do, is that when cta-end is clicked, the two divs bloc1 and bloc2 display, and when i click another time on cta-end it displays none. My code doesn't work at all. I guess I'm not using the toggle() function as it should be used. I just want to switch the two functions any time cta-end is clicked..

here is the code on jsfiddle

thank you !

arulmr · Accepted Answer · 2013-04-26 10:51:24Z

2

You can use the code below:

$(document).ready(function () {
    $('#cta-end').click(function () {
        $('#bloc1, #bloc2').toggle();
        //or $('#bloc1, #bloc2').toggle(1000); for transition effect
    });
});

JSFIDDLE1 or JSFIDDLE2

edited Apr 26, 2013 at 10:51

answered Apr 26, 2013 at 10:45

arulmr

8,8629 gold badges56 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pavan G jakati · Accepted Answer · 2013-04-26 10:43:17Z

1

Try , Below code .

$('.target').toggle();

With no parameters, the .toggle() method simply toggles the visibility of elements

answered Apr 26, 2013 at 10:43

Pavan G jakati

1131 silver badge7 bronze badges

Comments

rajesh kakawat · Accepted Answer · 2013-04-26 10:57:29Z

1

try this out ,FIDDLE

$(document).ready(function(){
      $('#cta-end').toggle(function () {
           $('#bloc1').css({"display":"block"});
           $('#bloc2').css({"display":"block"});
        },
           function () {
           $('#bloc1').css({"display":"none"});
           $('#bloc2').css({"display":"none"});
        }
     );

});

TRY to use like this

     $('#bloc1,#bloc2').css({"display":"block"});

EDITED For jQuery 1.9

$(document).ready(function(){

    $('#cta-end').click(function(){   
         $('#bloc1').toggle('fast');
        $('#bloc2').toggle('fast');
   });

});

edited Apr 26, 2013 at 10:57

answered Apr 26, 2013 at 10:40

rajesh kakawat

10.9k1 gold badge24 silver badges40 bronze badges

Comments

shefali · Accepted Answer · 2013-07-25 11:48:54Z

1

toggling between functions dont work in above jquery 1.7 , you can use toggleClass() instead. http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_toggleclass

answered Jul 25, 2013 at 11:48

shefali

851 silver badge9 bronze badges

Collectives™ on Stack Overflow

jQuery toggle( ) between two functions not working

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related