JQuery Show/ Hide Slider

Slim · 05-15-2013, 07:43 PM

Teaching you how to make a show/ hide slider today, can be pretty good for tidying up FAQ pages or just enhancing user experience for general parts of your website.

Include JQuery and the scripts we will use in the <head> tags of your site

Code:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script src="showhide.js" type="text/javascript"></script>

Now create a new file named 'showhide.js' - if you place it in a folder like /js you will need to edit the src for the code above.

Code:
$(document).ready(function(){
 
        $(".slideThisDiv").hide();
        $(".showhide").show();
 
    $('.showhide').click(function(){
    $(".slideThisDiv").slideToggle();
    });
 
});

Now this goes in the body of the page you want to display the slider on, you can obviously see the places you can change the content and show/ hide names.

Code:
<a href="#" class="showhide">Show That Shit / Hide That Shit</a>
<div class="slideThisDiv">
Put your motherfucking content here!</div>

Now style it! This can go in your head and style tags or in an external stylesheet.

Code:
.slideThisDiv {
    height:400px;
    background-color: #eeeeee;
    padding:20px;
    margin-top:5px;
}
 
.showhide {
    display:none;
}

Easy.

JQuery Show/ Hide Slider
Author Message