CODEWITHSUNDEEP
jquery
Sara Lind
Sara Lind

Reputation: 41

simple Toggle with CSS & jQuery, problems with icons to show state!

I am trying to use make a simple Toggle with CSS & jQuery for a project. My problem is when one item is open, and another is clicked. The icon is changing when clicked to let the user see that it is possible to expand or collaps (+ -). When one is clicked, the open ones are closed as I want it to, BUT the icon is not changing back to the + for the closed ones.

Dos anybody have a solution for that??

My file looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 
<title>Simple Toggle with CSS &amp; jQuery by Soh Tanaka</title> 
<style type="text/css"> 

.container {
 width:200px;
 min-height:490px;
 position:absolute;
 top: 120px;
 left:810px;
 background-color:#f4f3f3;
 padding:5px;
 }

h2.trigger {
 padding: 0 0 0 20px;
 margin: 0 0 5px 0;
 background: url(pics/PlusMinus.gif) no-repeat;
 height: 16px;
 line-height: 16px;
 width: 250px;
 font-size: 16px;
 font-weight: normal;
 float: left;
}
h2.trigger a {
 color: #000;
}

h2.active {
background-position: left bottom;
}



</style> 
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

<script type="text/javascript"> 
$(document).ready(function(){
 //Hide (Collapse) the toggle containers on load
 $(".toggle_container").hide();
 //Slide up and down & toogle the Class on click

$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow");
$(this).siblings().next("div.toggle_container").toggleClass("active").slideUp("slow");


});return false;
})
</script>



</head> 

<body> 

<div class="container"> 
 <h2 class="trigger"><a href="#">Property</a></h2> 
 <div class="toggle_container"> 

   <a href="#" id="">1</a><br />
    <a href="#"id="">2</a>
    <br />
    <a href="#" id="">3</a>
    <br /> <br /> 
 </div> 

 <br /><br />
 <h2 class="trigger"><a href="#">Hotel</a></h2> 
 <div class="toggle_container"> 
   <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> 
  </div> 

 <br /><br />
 <h2 class="trigger"><a href="#">Other</a></h2> 
 <div class="toggle_container"> 
   <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> 
  </div> 


   </div>

</body> 
</html>

I hope you can help.

Thanks Sara

Upvotes: 1

Views: 1408

Answers (3)

Sara Lind
Sara Lind

Reputation: 41

Thank you its working now. Like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 
<title>Simple Toggle with CSS &amp; jQuery by Soh Tanaka</title> 
<style type="text/css"> 

.container {
    width:200px;
    min-height:490px;
    position:absolute;
    top: 120px;
    left:810px;
    background-color:#f4f3f3;
    padding:5px;
    }

h2.trigger {
    padding: 0 0 0 20px;
    margin: 0 0 5px 0;
    background: url(pics/PlusMinus.gif) no-repeat;
    height: 16px;
    line-height: 16px;
    width: 250px;
    font-size: 16px;
    font-weight: normal;
    float: left;
}
h2.trigger a {
    color: #000;
}

h2.active {
background-position: left bottom;
}



</style> 

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 

<script type="text/javascript"> 
$(document).ready(function(){
    //Hide (Collapse) the toggle containers on load
    $(".toggle_container").hide();
 //Slide up and down & toogle the Class on click

$("h2.trigger").click(function(){

if ( $('h2.trigger').hasClass("active") ) {
            $('h2.trigger').removeClass("active");
        } else {
            $(this).addClass("active");
        }
        var $nextDiv = $(this).next();
        var $visibleSiblings = $nextDiv.siblings('div:visible');

        if ($visibleSiblings.length ) {
            $(this).addClass("active");
            $visibleSiblings.slideUp('fast', function() {
                $nextDiv.slideToggle('fast');
            });
        } else {
            $nextDiv.slideToggle('fast');
        }
});return false;
})

</script>


</head> 

<body> 

<div class="container"> 

    <h2 class="trigger"><a href="#">Property</a></h2> 
    <div class="toggle_container"> 

            <a href="#" id="">1</a><br />
    <a href="#"id="">2</a>
    <br />
    <a href="#" id="">3</a>
    <br />
    </div> 
    <br />
    <br />
    <h2 class="trigger"><a href="#">Hotel</a></h2> 
    <div class="toggle_container"> 
            <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> 
        </div> 

    <br /><br />

    <h2 class="trigger"><a href="#">Other</a></h2> 
    <div class="toggle_container"> 
            <p>Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </p> 
        </div> 


   </div>

</body> 
</html>

Upvotes: 1

WSkid
WSkid

Reputation: 2786

Several ways you can do this, but using your existing setup... change the CSS a bit:

h2.trigger {
 padding: 0 0 0 20px;
 margin: 0 0 5px 0;
 background-image: url(plus.png);
 background-repeat:no-repeat;
 height: 16px;
 line-height: 16px;
 width: 250px;
 font-size: 16px;
 font-weight: normal;
 float: left;
}

Then in the script:

$("h2.trigger").click(function(){
$(this).toggleClass("active").next().slideToggle("slow").css('background-image','url(minus.png)');
$(this).siblings().next("div.toggle_container").toggleClass("active").slideUp("slow").css('background-image','url(plus.png)');
});

Separating the image lets you change it easier, I've had mixed results with changing the url with straight background:. In the script we added the css change to the new image.

Jquery $.css()

Some alternatives:

Use a single image, and change the css background position (x or y depending on your sprite sheet).

Use jQuery accordion and for the icons use the jQuery ThemeRoller icon sheet with this line:

$( ".selector" ).accordion({ icons: { 'header': 'ui-icon-plus', 'headerSelected': 'ui-icon-minus' } });

jQuery accordion

Or go all crazy with jsTree - which may or may not be the exact thing you were looking for.

Upvotes: 0

Derek Adair
Derek Adair

Reputation: 21925

You are definitely looking for the accordion effect.

Very simple in jQuery UI =)

Upvotes: 0

Related Questions