JSFiddle - React, Tailwind, and code Playground

by fiddledrew

HTML

<HTML>
  <STYLE>


  </STYLE>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <! https://blog.calebnance.com/jquery/very-easy-accordion-with-jquery-from-scratch.html>

  <head>

  </head>






  <body translate="no" id="body">
    <div id="container">


      <div id="header">
        <a>Header</a>
      </div>
      <div id="mainBody">
        <a>Main</a>
        <div class="accordion">
          <div class="accord-header">Header 1</div>
          <div class="accord-content">This is the content for the first header.</div>
          <div class="accord-header">Header 2</div>
          <div class="accord-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
          <div class="accord-header">Header 3</div>
          <div class="accord-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
      </div>



      <div id="footer">
        <a>Footer</a>
      </div>

    </div>

  </body>

</HTML>

CSS

#container {
        width: 500px;
        margin: auto;
				background-color:beige;
      }

      body {
        background: white;
      }

      .accord-header {
        cursor: pointer;	
				border: 2px solid navy;
      }

      .accord-content {
        display: none;
				background: pink;
				border: 2px solid grey;
				
      }

      .on {
        background: silver;
      }

JavaScript

$(document).ready(function() {
  $(".accordion .accord-header").click(function() {
    // for active header definition
    $('.accord-header').removeClass('on');
    $(this).addClass('on');

    // accordion actions
    if ($(this).next("div").is(":visible")) {
      $(this).next("div").slideUp(400);
      $(this).removeClass('on');
    } else {
      $(".accordion .accord-content").slideUp(400);
      $(this).next("div").slideToggle(400);
    }
  });
});
//# sourceURL=pen.js