wroh woefh wroh woefh - 2 months ago 6
CSS Question

only top button sliding down works css jquery

<%@ 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

Answer
 <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

Comments