1. Free Delta
  2. Javascript
  3. JQuery Show Hide Div with a Plus Sign

JQuery Show Hide Div with a Plus Sign

Show/Hide a div with JQuery Javascript library

Jquery plus minus sign to show and hide divs

This simple script gives the impression of expanding and collapsing a div content

 

Cars +



Code

<div id="container" style="width: 150px;">
<div id="cars"> Cars <a href="#" onclick="$('#car_list').show();$('#cars').hide();" style="text-decoration: none; float: right;">+</a> </div>
<div id="car_list" style="display: none;"><a href="#" onclick="$('#cars').show();$('#car_list').hide();"  style="text-decoration: none; float: right;">-</a>
Cars
<ol>
 <li>Alfa Romeo</li>
 <li>Mercedes</li>
 <li>Ferrari</li>
</ol>
</div>
</div>

Don't forget to include the JQuery library before the </header> tag:
<script src="jquery.js" type="text/javascript"></script>