JSFiddle - React, Tailwind, and code Playground

by Kirouthika K

HTML

<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  </head>
  <h3><a href="http://www.tutorialsmade.com/jquery-simple-accordion-plus-minus/">Click here for tutorial</a></h3>
  <div class="accordion_container">
    <div class="accordion_head">Lorem Ipsum<span class="plusminus">+</span></div>
    <div class="accordion_body" style="display: none;">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    </div>
    <div class="accordion_head">Testing one more<span class="plusminus">+</span></div>
    <div class="accordion_body" style="display: none;">
      <p>Works fine</p>
    </div>
    <div class="accordion_head">Testing two more :-)<span class="plusminus">+</span></div>
    <div class="accordion_body" style="display: none;">
      <p>Works fine</p>
    </div>

  </div>

</html>

CSS

.accordion_container {
  width: 500px;
}

.accordion_head {
  background: url(images/red.png) brown;
  color: white;
  cursor: pointer;
  font-family: arial;
  font-size: 14px;
  margin: 0 0 1px 0;
  padding: 7px 11px;
  font-weight: bold;
}

.accordion_body {
  background: lightgray;
}

.accordion_body p {
  padding: 5px;
  margin: 0px;
}

.plusminus {
  float: right;
}

JavaScript

$(document).ready(function(){
$('.accordion_body').is(':visible');
	//toggle the componenet with class accordion_body
	$(".accordion_head").click(function(){
		if ($('.accordion_body').is(':visible')) {
			$(".accordion_body").slideUp(600);
			$(".plusminus").text('+');
		}
		$(this).next(".accordion_body").slideDown(600); 
		$(this).children(".plusminus").text('-');
	});
});