A very simple accordion menu

Hello friends. Here is a very simple accordion menu script. You can add more menus in this list. Just copy and paste this code into your html page.
Html and Css
    

     <!doctype html>
     <html>
     <head>
     <title>Simple Accordion Menu</title>
    
     <style type="text/css">
      * {
          outline: none;
          margin: 0px;
          font-family: Arial, Helvetica, sans-serif;
      }
      .accordion {
          margin: 0px auto;
          padding: 0px;
          width: 220px;
          outline: none;
      }
      .accordion_head {
          margin: 0px;
          padding: 3px;
          background-color: #eae7e2;
          border: 1px #cccccc solid;
      }
      .accordion_head a {
          font-size: 14px;
          color: #000000;
          font-weight: bold;
          padding-left: 10px;
          text-decoration: none;
      }
      .accordion_content {
          display: none;
          font-size: 12px;
          margin: 0px auto;
          padding: 0px;
          width: 218px;
          background-color: #f7f4ef;
          border: 1px #cccccc solid;
      }
      .accordion_content p {
          padding: 10px;
      }
     </style>
     </head>
    
     <body>
     <div class="accordion">
        <div class="accordion_head">
              <a href="javascript:;">Heading 1</a></div>
        <div class="accordion_content">
          <p>1 1 1 1 1 1 1 1 1 1</p>
        </div>
        <div class="accordion_head">
              <a href="javascript:;">Heading 2</a></div>
        <div class="accordion_content">
          <p>2 2 2 2 2 2 2 2 2 2</p>
        </div>
        <div class="accordion_head">
              <a href="javascript:;">Heading 3</a></div>
        <div class="accordion_content">
          <p>3 3 3 3 3 3 3 3 3 3</p>
        </div>
        <div class="accordion_head">
              <a href="javascript:;">Heading 4</a></div>
        <div class="accordion_content">
          <p>4 4 4 4 4 4 4 4 4 4</p>
        </div>
        <div class="accordion_head">
              <a href="javascript:;">Heading 5</a></div>
        <div class="accordion_content">
          <p>5 5 5 5 5 5 5 5 5 5</p>
        </div>
     </div>
    </body>
   </html>

The Javascript
 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
  $('.accordion div.accordion_head').click(function(){
  $(this).next('div.accordion_content').slideToggle(400).siblings("div.accordion_content").slideUp('slow');
  });
  </script>


The Example Demo

Simple Accordion Menu
1 1 1 1 1 1 1 1 1 1
2 2 2 2 2 2 2 2 2 2
3 3 3 3 3 3 3 3 3 3
4 4 4 4 4 4 4 4 4 4
5 5 5 5 5 5 5 5 5 5
A very simple accordion menu A very simple accordion menu Reviewed by Altaf Hussain on 12:43 PM Rating: 5

No comments:

Altaf Web. Powered by Blogger.