Javascript drop down section with plus minus buttons

I want to find some javascript code which will allow this:

Content A Title
------------------
------------------
Content B Title

to turn into this when you press a plus button and when you press a minus button it returns

Content A Title
------------------
Content A Here (Pictures and Text as designed html)
------------------
Content B Title
,
I have to use it 10 or so times on the screen so it needs to be able to be easily installed, short in code or shortenable by some server side or coding method.

 

We can use a hidden input (so it doesn't pollute our non-screen media appearance) that we slide off screen along with the content using absolute positioning, then revert it to the normal position with display:static;

<input type="checkbox" id="contentA" class="toggle_section" hidden>
<h2><label for="contentA">Content A title</label></h2>
<div>
	Content A Here
</div>

<input type="checkbox" id="contentB" class="toggle_section" hidden>
<h2><label for="contentA">Content B title</label></h2>
<div>
	Content B Here
</div>

Code (markup):

In the CSS the adjacent sibling selector should take care of the rest without any wasteful / extra classes.

.toggle_section,
.toggle_section + h2 + div {
	/*
		IE screws up hidden INPUT making LABEL not click on it.
		Massive negative height so the absolute doesn't make the
		scroll bigger than it should be.
	*/
	display:block;
	position:absolute;
	left:-999em;
	top:-999em;
}

.toggle_section:checked + h2 + div {
	position:static; /* turn off positioning */
}


.toggle_section + h2:before {
	content:"+";
	display:inline-block;
	width:1.5em;
	line-height:1.5em;
	background:#CCC;
}

.toggle_section:checked + h2:before {
	content:"-";
}

Code (markup):

The +/- button is a bit rough around the edges, so adjust that styling as desired. Might be some typo's as this is a drive-by post from the laptop, but should give you the gist of what I'm saying to do.

Basically this isn't JavaScript's job anymore. In fact this approach can even be used to create slide-in/out animations, fade in/out, etc, etc. (an extra DIV may be needed depending on the effect)

Oh and of course, adjust the numbered headings to the depth appropriate to the document structure.

 

When you are developing some code in any language, make sure you build it in step by step manner. Here you want + and - signs to open and close panels and show their contents to the users. So you will have to following steps to performs:

1. Show an img tag which show + and - signs on clicking.
2. When the img tag is clicked you also open and close the corresponding panel to show it's content.
3. Make sure all the other panels remain close i.e. only one panel opens up on clicking the + sign.

So in order to make it you will need 2 images in your website. One for showing the + sign and other for showing the - sign. Now with this, you make the HTML as shown below:

<div class="parentDiv">
    <div class="showHidePanel">
        <img src="Image/plus.jpg" />
        <div class="contentPanel">
          // put your content here
        </div>
    </div>
   <div class="showHidePanel">
        <img src="Image/plus.jpg" />
        <div class="contentPanel">
          // put your content here
        </div>
    </div>
    <div class="showHidePanel">
        <img src="Image/plus.jpg" />
        <div class="contentPanel">
          // put your content here
        </div>
    </div>
</div>

Code (markup):

Make sure you make the contentPanel div display none initially. You do this with CSS:

.showHidePanel .contentPanel{
  display: none;
}

Code (markup):

Now you create the click event code for the img tag which does the whole work, see below:

$(".showHidePanel> img").click(function (e) {
  var currval = $(this).parents(".showHidePanel").find(".contentPanel");

  if ($(currval).is(":visible")) {
    currval.hide("fast", "swing");
    $(this).attr("src", "Image/minus.jpg");
  } 
  else {
    currval.show("fast", "swing");
    $(this).attr("src", "Image/minus.jpg");
  }
});

Code (markup):

The code is very short and just have some 10 lines. It simply checks the visibility of the contentPanel div. If it is hidden it shows and makes the + sign on the img tag to - sign and vice versa. You can also look into this very good tutorial on the same thing.

I did the explaining on the code step by step manner so that you can know exactly how to build codes by yourself. Coding is very easy if you make it in step by step.

Thank you...