I am in the process of creating a website and I want it to consist of just one index page. When visitors land on the page, they will see several rows similar to this example. By clicking on a row, the hidden information below will expand, giving it a look like this.
In my search for a solution, I came across this resource and attempted to implement it by copying and pasting the code into a new file for testing purposes. However, it did not work as expected even after adding the necessary HTML tags and files. Here is a snippet from my code:
//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;
}
//slide.jsvar clicked=true;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": 0});
}
else
{
clicked=true;
$(".two").css({"top": "-40px"});
}
});
Despite my efforts, the code does not seem to be working properly. Can anyone help me identify what I am missing?