Hello there.

In this blog, I am going to tell you how to hide or show your content. If you are trying to hide and/or show your content, this can happen with a change in the plus minus sign.

How? This blog has the answer to it.

In the code below, you’ll see the future of accordion. Only one accordion slide opens up at a time. Others will be closed automatically as one is opened. And the same applies for plus or minus sign.

Minus indicates if you want to close or minimise an accordion. Whereas the plus sign indicates if you want to open or maximise an accordion.

HTML:

<div class="parent-div">
	<h3 class="accordion-heading">Show/hide me <span class="plusminus">+</span></h3>
	<div class="accordion-body">
		<p>Are you trying to find a way to hide and show your content? The demo below shows a simple yet elegant way of toggling your content and toggling the control text via Javascript and styling.</p>
	</div>	
</div>
<div class="parent-div">
	<h3 class="accordion-heading">Show/hide me <span class="plusminus">+</span></h3>
	<div class="accordion-body">
		<p>Are you trying to find a way to hide and show your content? The demo below shows a simple yet elegant way of toggling your content and toggling the control text via Javascript and styling.</p>
	</div>	
</div>
<div class="parent-div">
	<h3 class="accordion-heading">Show/hide me <span class="plusminus">+</span></h3>
	<div class="accordion-body">
		<p>Are you trying to find a way to hide and show your content? The demo below shows a simple yet elegant way of toggling your content and toggling the control text via Javascript and styling.</p>
	</div>	
</div>

In the HTML code provided above, the “accordion-heading” is a clickable part which is visible and the “accordion-body” is the content part which is hidden by default and “plusminus” is the change in the plus/minus sign ‘on click’.

JQuery:

<script language="javascript"> 
    $(document).ready(function(){
    	$(".accordion-heading").click(function(){  
    	      if($(".accordion-body").is(':visible')){  /* check the condition accordion-body is visible or not */
    		      $(".accordion-body").slideUp(600);  /*if content is visible then close accordion-body with specific time duration */
    			$(".plusminus").text('+')    /* add plus sign */
    		}
    		else{
    			$(this).next(".accordion-body").slideDown(600); /*if content not visible then 
                                                                                                            show the accordion-body */
    			$(this).children(".plusminus").text('-');  /* add minus sign */
    		}
    	});
    });
</script>

Here, the code provided above is simple and easy to understand. When we click the “.accordion-heading”,  check that the “accordion-body” div is visible or not. If condition checks that the “accordion-body” is visible, then slide will hide smoothly.  “.slideUp(600)” and plus sign will show. If “accordion-body” is not visible, then slide will show  “.slideDown(600)” with minus sign.

CSS:

.parent-div{
	width: 50%; 
	border: 1px solid #f1f1f1; 
	padding:0; 
	margin: 0; 
	background: #D3D3D3;
}
.accordion-heading{
	background: #287276; 
	padding: 5px 10px; 
	margin: 0; 
	cursor: pointer; 
	color: #fff;
}
.accordion-heading span{
	float: right;
}
.accordion-body{
display: none;
	padding: 0 10px;
}

Above code uses the display attribute “display: none” for the accordion body hide by default. 

Output:

You can see live demo here: https://jsfiddle.net/mani_123/7q7y26va/show/