simple Toggle with CSS & jQuery, problems with icons to show state! -
i trying use make simple toggle css & jquery project. problem when 1 item open, , clicked. icon changing when clicked let user see possible expand or collaps (+ -). when 1 clicked, open ones closed want to, icon not changing + closed ones.
dos have solution that??
my file looks 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 css & jquery 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 { 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) toggle containers on load $(".toggle_container").hide(); //slide , down & toogle 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 can help.
thanks sara
thank working now. 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 css & jquery 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 { 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) toggle containers on load $(".toggle_container").hide(); //slide , down & toogle 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>
Comments
Post a Comment