I'm making a website and I want it to be just one index page. And when you land, there will be a couple rows like this and when you click a row, it will expand the information that's been hiding to the bottom so it looks like this .
Now I searched around and I found this and I essentially copied and pasted the thing onto a new file just to fool around with it but it didn't work. I added the html tags, and important the proper files and such, well my code looks like this.
//Index
<!DOCTYPE html>
<html>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<link href="main.css" rel="stylesheet">
<script type="slide.js"></script>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">Hey it worked!
<br>New Contenttt</div>
</div>
</html>
//main.css
.container {
overflow:hidden;
height: 60px;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
/*.one:hover + .two {
top: 0px;
}*/
//slide.jsvar clicked=true;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": 0});
}
else
{
clicked=true;
$(".two").css({"top": "-40px"});
}
});
However it doesn't seem to work. What am I missing?
var clicked=true;
is commented out. Uncomment this.
Hope this helps.
I think you are looking for something like this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function (event) {
$(".one").on('click', function(){
$(".two").slideToggle('fast')
});
});
</script>
<style>
.container {
overflow:hidden;
height: 60px;
}
.one {
background-color: #FFC300;
cursor:pointer;
}
.two {
display:none; /* delete this line if you want to show your yellow div by default*/
background-color: yellow;
}
</style>
</head>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">Hey it worked!
<br>New Contenttt</div>
</div>
</html>
I am not sure how is your markup since in your previous answer you comment you have written
I just messed up when copy and pasting
Here is the complete mark up including JS and CSS
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<style>
.container {
overflow:hidden;
height: 60px;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
</style>
</head>
<body>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">Hey it worked!
<br>New Contenttt</div>
</div>
<script>
var clicked=true;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": 0});
}
else
{
clicked=true;
$(".two").css({"top": "-40px"});
}
});
</script>
</body>
</html>
NOTE: I include the body
, & head
tag. Also please update are you referring the css and js from external file.Currently I have referring CSS and JS from same page
Change
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> to <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> in index.html
and <script type="slide.js"></script>
to <script src="slide.js"></script>
and embed your code in $(document).ready( function () { });
and Uncomment var clicked=true;
Final code will be
index.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="slide.js"></script>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">Hey it worked!
<br>New Contenttt</div>
</div>
</body>
slide.js
$(document).ready(function() {
var clicked = true;
$(".one").on('click', function() {
if (clicked)
{
clicked = false;
$(".two").css({"top": 0});
}
else
{
clicked = true;
$(".two").css({"top": "-40px"});
}
});
});
main.css
.container {
overflow:hidden;
height: 60px;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
/*.one:hover + .two {
top: 0px;
}*/
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.