Simple Jquery Accordion – Simple Jquery CSS Accordion

Simple Jquery Accordion. Jquery Accordion with CSS, In this example you will learn how to make Jquery CSS Accordion. …….. its an old script but here i am putting it by making it too much simple and easy to use. It will include the Jquery and CSS and some Html text. So lets start with Jquery Accordion.

We will use three script here- 1 Jquery, 2 Css, 3 Html.

Step 1. Html

<div id="myaccordion" class="accordion">
                    <p class="header blue">Your Name</p>
                        <div class="contentarea">
                            <span>You can also put image here</span>
                        </div>
                    <p class="header green">Your Image</p>
                        <div class="contentarea">
                            <a>You can post a link too</a>
                        </div>
                    <p class="header grey">Your Detail</p>
                        <div class="contentarea">
                            <span>Hello its me</span>
                        </div>
                </div>

Now we will use the CSS for its Design.

Step 2. CSS

<style>
        .accordion {
	width: 300px;
}
.header {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
       font-weight:bold;
       color: #fff;
}
.contentarea {
	display:none;
}
.contentarea a, span {
  display:block;
  color:#000;
  background-color:#EFEFEF;
  padding-left:10px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-weight:bold;
  text-decoration:none;
}

.contentarea p {
  margin: 0;
}
.contentarea a:hover {
  color: #000000;
  text-decoration:underline;
}
.green{background: #4fc0ae;}
.grey{background: #58595b;}
.blue{background-color: #459EE9;}
    </style>

Now we will add our Jquery Code

Step 3.  Jquery

<script>
    $("#myaccordion p.header").click(function()
{
    $(this).next("div.contentarea").slideToggle(300).siblings("div.contentarea").fadeOut(500);
});
</script>

You can change the effect like at last if you add slideUp it will work differently

So Now we have completed the Tutorial.