Home/ Questions/Q 7928399
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T19:43:12+00:00

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

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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

    });
});
    • 0