Vertical accordion drop-down menu effect
Technology used: jquery
Now many mobile apps and some websites will use this vertical accordion drop-down menu, which can make better use of space and more reasonable layout, especially in mobile development
Code display:
HTML part
<body>
<div style="position: absolute; z-index: 10; margin-top: 150px; margin-left: 80px;">
<div class="box">
<div class="Collapsing current"><img src="Images/Car decoration/Standard car 0001.png"></div>
<div class="coll_body">
<img src="Images/car decoration/tourism.png">
<img src="Images/car decoration/non-tourist.png">
</div>
<div class="Collapsing"><img src="Images/Car decoration /L Luxury car 0001.png"></div>
<div class="coll_body">
<img src="Images/Car decoration/Chinese.png">
<img src="Images/Car decoration/Europe.png">
<img src="Images/Car decoration/modern.png">
<img src="Images/Car upholstery/modern stainless steel. PNG">
</div>
<div class="Collapsing" style="background-image: none;"><img src="Images/Car decoration/ceiling 0001.png"></div>
<div class="coll_body">
</div>
<div class="Collapsing" style="background-image: none;"><img src="Images/Car decoration /COP Decoration 0001.png"></div>
<div class="coll_body">
</div>
<div class="Collapsing" style="background-image: none;"><img src="Images/Car upholstery/handrail 0001.png"></div>
<div class="coll_body">
</div>
<div class="Collapsing"><img src="Images/Car decoration/floor 0001.png"></div>
<div class="coll_body">
<a href="#"><img src="Images/car decoration/non-tourist.png"></a>
<a href="#"><img src="Images/car decoration/tourism.png"></a>
</div>
</div>
</div>
</body>
Copy the codeThe CSS part
*/. Box {width: 200px; height: auto; } .Collapsing { width: 100%; margin-top: 30px; background-image: url(.. /images/ car decoration/standard car _right.png); } .coll_body { display: none; } .coll_body img { /*display: block; */ margin: 0px; margin-left: 35px; } .current { background-image: url(.. PNG); }Copy the codeJs part
// $(function(){
$(".coll_body").eq(0).show();
$(".Collapsing").click(function(){
$(this).toggleClass("current").siblings('.Collapsing').removeClass("current"); $(this).next(".coll_body").slideToggle(500).siblings(".coll_body").slideUp(500);
});
Copy the codeCode parsing: mainly explains the JS partThis case is using jquery to do, so JS first use
$(".coll_body").eq(0).show();
Copy the codeDisplay the first element of all the.coll_body class; When you click on the.Collapsing element, call toggleClass() to toggle to set or remove the. Current and.Collapsing classes for the selected element. Call both the.sibings show and hide animations for the.coll_body.