Simple CSS and JQuery Accoridon for your Web page.

Here you can get the simple accordion for your webpage. In this Accordion, we can use the simple Jquery and CSS for this Accordion. You can just Copy the below code and use it for your application. In this, you want to change the style by changing the CSS for what you want. See the Demo below. Click the mouse over the Expand Text.

HTML:

<div class="container">
    <div class="header">
        <span>Expand</span>
    </div>
    <div class="content">
        <p>Your Accordion Content Goes Here</p>
        <p>Your Accordion Content Goes Here</p><p>Your Accordion Content Goes Here</p><p>Your Accordion Content Goes Here</p><p>Your Accordion Content Goes Here</p><p>Your Accordion Content Goes Here</p>
    </div>
</div>

CSS:

.container {
    width: 90%;
    border: 1px solid #d3d3d3;
}
.container div {
    width: 98.5%
}
.container .header {
    background-color: #d3d3d3;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
}
.container .content {
    display: none;
    padding: 5px;
}

jQuery:

$(document).ready(function(){
  $(".header").click(function () {
    $header = $(this);
    $content = $header.next();
    $content.slideToggle(500, function () {
      $header.text(function () {
      return $content.is(":visible") ? "Collapse" : "Expand";
      });
    });
  });
});

OUTPUT: