Expanding-Collapsing Sliding Div Jquery

To make own accordion using JQuery and HTML in just 4 steps.

Step: 1

All these expanding collapsing div code require following JQuery need to add in Script Tab,

add below line of code in your head tag.

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js&#8217; type=’text/javascript’></script>

Step: 2

Write below script in head tag,

<script type=”text/javascript”>

function toggleSlides() {
$(‘.toggle’).click(function (e) {
var id = $(this).attr(‘id’);
var widgetId = id.substring(id.indexOf(‘-‘) + 1, id.length);
$(‘#’ + widgetId).slideToggle();
$(this).toggleClass(‘sliderExpanded’);
$(‘.closeSlider’).click(function () {
$(this).parent().hide(‘slow’);
var relatedtoggle = ‘toggle-‘ + $(this).parent().attr(‘id’);
$(‘#’ + relatedtoggle).removeClass(‘sliderExpanded’);
});
});
};
$(function () {
toggleSlides();
});

</script>

Step: 3

<style type=”text/css”>

.slider
{
display: none;
}
.collapseSlider
{
display: none;
}
.sliderExpanded .collapseSlider
{
display: block;
}
.sliderExpanded .expandSlider
{
display: none;
}

</style>

Step:4 

<div>
<p class=”toggle” id=”toggle-slideOne”>
<span class=”expandSlider”>SHOW</span><span class=”collapseSlider”>HIDE</span>
</p>
<div class=”slider” id=”slideOne”>
<p>
Slide One lorem ipsum opsum…</p>
<span class=”closeSlider”>Close</span>
</div>
<p class=”toggle” id=”toggle-slideTwo”>
<span class=”expandSlider”>SHOW</span><span class=”collapseSlider”>HIDE</span>
</p>
<div class=”slider” id=”slideTwo”>
<p>
Slide Two lorem ipsum tupsum…</p>
<span class=”closeSlider”>Close</span>
</div>
</div>

Happy Coding 🙂

Advertisements

One thought on “Expanding-Collapsing Sliding Div Jquery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s