only top button sliding down works css jquery
Question
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style>
#Slider {
}
#Actual {
background: silver;
color: White;
padding: 20px;
}
.slideup, .slidedown {
max-height: 0;
overflow-y: hidden;
-webkit-transition: max-height 0.8s ease-in-out;
-moz-transition: max-height 0.8s ease-in-out;
-o-transition: max-height 0.8s ease-in-out;
transition: max-height 0.8s ease-in-out;
}
.slidedown {
max-height: 60px ;
}
</style>
</head>
<body>
<%
for(int i=0;i<3;i++){
%>
<div class="container" style="padding: 40px">
<a id="Trigger">Trigger Slideup/SlideDown</a>
<div id="Slider" class="slideup">
<div id="Actual">
Hello World Text
</div>
</div>
</div>
<%} %>
<script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script>
$("#Trigger").click(function () {
$("#Slider").toggleClass("slidedown slideup");
// if ($("#Slider").hasClass("slideup"))
// $("#Slider").removeClass("slideup").addClass("slidedown");
// else
// $("#Slider").removeClass("slidedown").addClass("slideup");
});
</script>
</body>
</html>
Hi guys! I like to make all three banner work but only top one works. any idea what is wrong with this?
This is what is look like on web
--------------------------------------------------------------------------------
***text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text*** ***text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text******text***v
1 answers
solution1
1 ACCPTED 2016-09-10 22:18:41
<div class="container" style="padding: 40px"> <a id="Trigger">Trigger Slideup/SlideDown</a> <div id="Slider" class="slideup"> <div id="Actual"> Hello World Text </div> </div> </div>
Each of your banners will have elements with id's Trigger Slider Actual (three of each). id attribute should have a unique value in the document. jQuery will select the first item with a given id.
First we replace id with class .
$(this).siblings(".Slider") is to make sure we are selecting the Slider in the same container the Target is in
$(".Trigger").click(function () { $(this).siblings(".Slider").toggleClass("slidedown slideup");; });
.slideup { background-color: red } .slidedown { background-color: gold }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container" style="padding: 40px"> <a class="Trigger">Trigger Slideup/SlideDown</a> <div class="Slider slideup"> <div class="Actual"> Hello World Text </div> </div> </div> <div class="container" style="padding: 40px"> <a class="Trigger">Trigger Slideup/SlideDown</a> <div class="Slider slideup"> <div class="Actual"> Hello World Text </div> </div> </div> <div class="container" style="padding: 40px"> <a class="Trigger">Trigger Slideup/SlideDown</a> <div class="Slider slideup"> <div class="Actual"> Hello World Text </div> </div> </div>
Note: I'm changing color instead of sliding up and down
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.