AlanSimpsonMe/CollapsiblePanels

## CollapsiblePanels
<!DOCTYPE html>
<html>
<head>
  <title>Collapsible Panel</title>
  <!-- Use this code however you like. I am at http://AlanSimpson.me- ->
  <!-- Load jQuery library (simplifies the JavaScript coding later)-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
    //jQuery code.
    $(document).ready(function () {
      //User clicked top of a collapsible panel.
      $('.cPanel .top').click(function () {
        //Switch between the two background images.
        $(this).toggleClass('collapse expand');
        //Slide the panel up or down.
        $(this).next('.slidepanel').slideToggle('slow');
      });
    });
  </script>
  <style>
    /* Style for the entire collapsible panel */
    .cPanel {
      background-color: #eef;
      width: 80%;
      margin: 1em auto;
      border: solid 2px #777;
      border-radius: 5px;
      font-family: Verdana, Tahoma, Sans-Serif;
    }
    /* Style for the top bar */
    .top {
      padding: 8px 48px 8px 4px;
      border: solid 1px white;
      border-radius: 5px;
      font-size: 1.1em;
    }
    /* Shows collapse button */
    .collapse {
      background: url(collapse.png) no-repeat 98% center;
    }
    /* Shows expand button */
    .expand {
      background: url(expand.png) no-repeat 98% center;
    }
    /* Style for panel that drops down.*/
    .cPanel .slidepanel {
      margin: 0;
      padding: 1em;
      background-color: white;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }
  </style>
</head>
<body>
  <article>
    <h1>Collapsible Panels</h1>
    <div class="cPanel">
      <!-- Text for the top bar goes in this first div -->
      <div class="top expand">
        Click anywhere on this top bar to expand or collapse.
      </div><!-- End top -->
      <!-- The slide-down text goes in this second div -->
      <div class="slidepanel">
        <p>You can put any content here inside the panel.</p>
      </div><!-- End slidepanel -->
    </div><!-- End cpanel -->
    <div class="cPanel">
      <!-- Text for the top bar goes in this first div -->
      <div class="top expand">
        Another collapsible panel here
      </div><!-- End top -->
      <!-- The slide-down text goes in this second div -->
      <div class="slidepanel">
        <p>Any content you like here</p>
      </div><!-- End slidepanel -->
    </div><!-- End cpanel -->

    </div>
  </article>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Collapsible Panel</title>
	<!-- Use this code however you like. I am at http://AlanSimpson.me- ->
	<!-- Load jQuery library (simplifies the JavaScript coding later)-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script>
	//jQuery code.
	$(document).ready(function () {
	//User clicked top of a collapsible panel.
	$('.cPanel .top').click(function () {
	//Switch between the two background images.
	$(this).toggleClass('collapse expand');
	//Slide the panel up or down.
	$(this).next('.slidepanel').slideToggle('slow');
	});
	});
	</script>
	<style>
	/* Style for the entire collapsible panel */
	.cPanel {
	background-color: #eef;
	width: 80%;
	margin: 1em auto;
	border: solid 2px #777;
	border-radius: 5px;
	font-family: Verdana, Tahoma, Sans-Serif;
	}
	/* Style for the top bar */
	.top {
	padding: 8px 48px 8px 4px;
	border: solid 1px white;
	border-radius: 5px;
	font-size: 1.1em;
	}
	/* Shows collapse button */
	.collapse {
	background: url(collapse.png) no-repeat 98% center;
	}
	/* Shows expand button */
	.expand {
	background: url(expand.png) no-repeat 98% center;
	}
	/* Style for panel that drops down.*/
	.cPanel .slidepanel {
	margin: 0;
	padding: 1em;
	background-color: white;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
	}
	</style>
	</head>
	<body>
	<article>
	<h1>Collapsible Panels</h1>
	<div class="cPanel">
	<!-- Text for the top bar goes in this first div -->
	<div class="top expand">
	Click anywhere on this top bar to expand or collapse.
	</div><!-- End top -->
	<!-- The slide-down text goes in this second div -->
	<div class="slidepanel">
	<p>You can put any content here inside the panel.</p>
	</div><!-- End slidepanel -->
	</div><!-- End cpanel -->
	<div class="cPanel">
	<!-- Text for the top bar goes in this first div -->
	<div class="top expand">
	Another collapsible panel here
	</div><!-- End top -->
	<!-- The slide-down text goes in this second div -->
	<div class="slidepanel">
	<p>Any content you like here</p>
	</div><!-- End slidepanel -->
	</div><!-- End cpanel -->

	</div>
	</article>
	</body>
	</html>