Sliding content in html using javascript

          I created a sliding content page using html,css and js .
 Hope it will be useful .. 

index.html:

<html>
<head>
    <!--<link type="text/css"  rel="stylesheet" href="bootstrap.css">
    <!--<script type="text/javascript" src="bootstrap-modal.js" ></script>-->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" ></script>
    <style>
    #head1,#head2,#head3:hover{cursor:pointer;}
    </style>
    <script>
        $(document).ready(function()
    {
        $("#mattr2").hide();$("#mattr3").hide();
        $("#head1").click(function(){$("#mattr1").slideDown("slow");$("#mattr2").slideUp();$("#mattr3").slideUp();});
        $("#head2").click(function(){$("#mattr2").slideDown();$("#mattr1").slideUp();$("#mattr3").slideUp();});
        $("#head3").click(function(){$("#mattr3").slideDown();$("#mattr1").slideUp();$("#mattr2").slideUp();});
    });
    </script>
<head>
<body>
    <div class="container-fluid">
        <div id="head1"  style="background:gray;color:white;border:2px solid black;font-size:20px;">Heading 1</div>
        <div id="mattr1" style="background:black;color:white;border:2px solid black;font-size:20px;">Some matter..<br/><br/><br/></div>
        <div id="head2" style="background:gray;color:white;border:2px solid black;font-size:20px;">Heading 2</div>
        <div id="mattr2"style="background:black;color:white;border:2px solid black;font-size:20px;" >Some matter...<br/><br/><br/></div>
        <div id="head3" style="background:gray;color:white;border:2px solid black;font-size:20px;">Heading 3.</div>
        <div id="mattr3" style="background:black;color:white;border:2px solid black;font-size:20px;">Some matter...<br/><br/><br/></div>
    </div>




</body>
</html>




Thank you guyss....

Comments

Post a Comment