Reputation: 13683

Jquery toggle does not respond immediately

I have a toggle in jquery and you can see it here: http://jsfiddle.net/Rua4j/

I would like when i click the title or the toggle button,hidden content is shown.By default,the content is hidden via toggle-off.In what i have only when i click the button does the button change to + or - depending on show or hide.How can i make the button change when i click the title?.

here is the code:

<!DOCTYPE html PUBLIC ">
<head>
<title>Faqs Toggle</title>
<style>
.container{
width:940px;
}
h3{
color:rgb(168,168,168);
}
p{
font-size:16px;
line-height:22px;
}
mark{
background-color:orange;
font-weight:bold;
    -webkit-border-radius:3px;
       -moz-border-radius:3px;
            border-radius:3px;
}
.lead{
font-size:18px;
line-height:24px;
font-weight:normal;
color:rgb(104,104,104);
}
#togglenav{
font-color:green;
}
.green{
cursor:pointer;
color:green;
}
span.green{
font-weight:bold;
font-style:italic;
}
#toggleContainer{
width:66%;
border-bottom:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
<script type='text/javascript'>
$(function(){
if($('#toggleContent').hasClass('toggle-off'))
{
$('#toggleContent').hide("slow");
}
else
{
$('#toggleContent').show("slow");
}
})

$(function(){
  $('.green').click(function() {
  if($(this).val() == "+") {
 $('#toggleContent').show("slow");
  $(this).val("-");
  }
  else {
   $('#toggleContent').hide("slow");
  $(this).val("+");
  }
});
});
</script>
</head>

<body>
<div class="container">
<h3>Faq Toggles</h3>

<div class="tgl" id="toggleContainer">
<div id="togglenav">
<input type='button' value='+' class="green" />
<span class="green">Vestibulum massa risus, aliquam sit amet dapibus sit amet</span><br/>
</div>
<div class="toggle-off" id="toggleContent">
<p class="lead">Vestibulum massa risus, aliquam sit amet dapibus sit amet, aliquet sed lectus. Morbi ultricies, nibh a placerat convallis, erat magna posuere nisi, sit amet iaculis dui velit at lorem.</p>
<p>
Sed felis purus, faucibus ut dapibus ac, ullamcorper at lorem. In ut eros congue lectus interdum fringilla vel commodo nisi. Maecenas magna quam, dapibus at malesuada nec, vestibulum ut tortor. Quisque blandit lectus a quam suscipit non fermentum erat consectetur. Sed iaculis lacinia augue, nec scelerisque metus <mark>placerat</mark> vel.
</p>
</div>
</div>
</div>
</body>
</html>

Upvotes: 0

Answers (4)

Nickolas Tuttle

Reputation: 208

I would change the css so it is hidden already, and then jquery will toggle on from there...

add display:none; to the div#togglecontent in css

Then change jquery to get get rid of the first function entirely

here is the code.

<!DOCTYPE html PUBLIC ">
<head>
<title>Faqs Toggle</title>
<style>
.container{
width:940px;
}
h3{
color:rgb(168,168,168);
}
p{
font-size:16px;
line-height:22px;
}
mark{
background-color:orange;
font-weight:bold;
    -webkit-border-radius:3px;
       -moz-border-radius:3px;
               border-radius:3px;
}
.lead{
font-size:18px;
line-height:24px;
font-weight:normal;
color:rgb(104,104,104);
}
#togglenav{
font-color:green;
}
.green{
cursor:pointer;
color:green;
}
span.green{
font-weight:bold;
font-style:italic;
}
#toggleContainer{
width:66%;
border-bottom:1px solid green;
}
    #toggleContent{
    display:none;
    }
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
<script type='text/javascript'>
$(function(){
  $('#togglenav').click(function() {
    if($('.green').val() == "+") {
      $('#toggleContent').show("slow");
      $('.green').val("-");
    }else {
      $('#toggleContent').hide("slow");
      $('.green').val("+");
    }
  });
});
</script>
</head>

<body>
<div class="container">
<h3>Faq Toggles</h3>

<div class="tgl" id="toggleContainer">
<div id="togglenav">
<input type='button' value='+' class="green" />
<span class="green">Vestibulum massa risus, aliquam sit amet dapibus sit amet</span><br/>
</div>
<div id="toggleContent">
<p class="lead">Vestibulum massa risus, aliquam sit amet dapibus sit amet, aliquet sed lectus. Morbi ultricies, nibh a placerat convallis, erat magna posuere nisi, sit amet iaculis dui velit at lorem.</p>
<p>
Sed felis purus, faucibus ut dapibus ac, ullamcorper at lorem. In ut eros congue lectus interdum fringilla vel commodo nisi. Maecenas magna quam, dapibus at malesuada nec, vestibulum ut tortor. Quisque blandit lectus a quam suscipit non fermentum erat consectetur. Sed iaculis lacinia augue, nec scelerisque metus <mark>placerat</mark> vel.
</p>
</div>
</div>
</div>
</body>
</html>

Upvotes: 1

khaled_webdev

Reputation: 1430

there is modified version that seems works as expected

http://jsfiddle.net/Rua4j/3/

Upvotes: 1

benqus

Reputation: 1139

That might be because your .hide() and .show() functions haven't completed the animation yet. You check whether your element is 'animated' and the clear the animation queue like this:

if ($("#toggleContent").is(":animated")) {
    $("#toggleContent").stop(true, true);
    $("#toggleContent").show("fast");
}

You can clear up a line - if you like that more:

$("#toggleContent").stop(true, true).show("fast");

This works also for .fadeIn(), .fadeOut(), .animated(), etc.

Upvotes: 1

Hadi Mostafapour

Reputation: 2266

you must call function when title clicked:

 $(function(){
    $('#togglenav').click(function(){

        if($('#toggleContent').is(':visible')){
            $('#toggleContent').hide("slow");
            $('.green').val("+");
        } else {
            $('#toggleContent').show("slow");
            $('.green').val("-");
        }

    });
});

Upvotes: 1

Jquery toggle does not respond immediately

Answers (4)

Related Questions