• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 266
  • Last Modified:

How do you make a collapsible div with "+" "-" that toggle

Hi,

I have a collapsible div with some content that I need to have a "+" "-" next to the header "airplanes" that toggle as well.

Here is what I have so far

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  
	    <script type="text/javascript">
	        $(function() {
	         $('#toggleair').click(function() {
	    $('.toggleair').toggle();
	    return false;
	});
        });
    </script>



<a href="#" id="toggleair">Airplanes</a><br /><br />
<div class="toggleair">
Cessna<br />
Piper<br />
Douglas</div>

Open in new window

0
smfmetro10
Asked:
smfmetro10
  • 3
  • 3
1 Solution
 
GaryCommented:
http://jsfiddle.net/GaryC123/LWXdr/1/

CSS
#toggleair:after {
    content:" -";
}
.toggleair_expand:after {
    content:" +" !important;
}

Open in new window


jQuery
$(function() {
	$('#toggleair').click(function() {
$('#toggleair').toggleClass("toggleair_expand");
	    $('.toggleair').toggle();
	    return false;
	});
        });

Open in new window

0
 
smfmetro10Author Commented:
Thanks for the reply!

Is there a way for the "+" "-" to be on the other side of the "airplanes" and also to not have the underline (just have the underline under "airplanes")?

Thanks!
0
 
GaryCommented:
This is based on this exact layout, it may need to be changed if you start changing the layout of your code
http://jsfiddle.net/GaryC123/LWXdr/3/
0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

 
smfmetro10Author Commented:
and or be able to move the "+" "-" a couple spaces away from the  "airplanes" text?
0
 
GaryCommented:
Did you miss my comment ^^^
0
 
smfmetro10Author Commented:
Perfect! Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now