JQuery Simple Accordion Step By Step
HTML Code
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="jquery-3.4.1.min.js"></script> </head> <body> <div class="s1"></div> <div class="s2"></div> <div class="s3"></div> <div class="s4"></div> <div class="s5"></div> <div class="s6"></div> <div class="s7"></div> <div class="s8"></div> <script src="myjs.js"></script> </body> </html>
CSS Code
.s1,.s3,.s5,.s7{
width:600px;
height:50px;
background-color:red;
border:1px solid black;
}
.s2{
width:602px;
height:300px;
background-color:green;
}
.s4,.s6,.s8{
width:602px;
height:300px;
background-color:green;
display:none;
}Js Code
// JavaScript Document
$(".s1").click(function()
{
$(".s2").slideDown(1000);
$(".s4").hide();
$(".s6").hide();
$(".s8").hide();
});
$(".s3").click(function()
{
$(".s4").slideDown(1000);
$(".s2").hide();
$(".s6").hide();
$(".s8").hide();
});
$(".s5").click(function()
{
$(".s6").slideDown(1000);
$(".s4").hide();
$(".s2").hide();
$(".s8").hide();
});
$(".s7").click(function()
{
$(".s8").slideDown(1000);
$(".s4").hide();
$(".s6").hide();
$(".s2").hide();
});
