I'm currently working on my website and encountered a slight obstacle. This is how my code looks at the moment. My goal is to position the "About" box beneath the "Home" box, and have the upper box slide down with the description when you click on the "Home" box. Any suggestions on how I can accomplish this?
Below is the code from my JS file:
$(document).ready(function (event) {
var clicked=false;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": -40}); //Slides up 40 pixels
}
else
{
clicked=true;
$(".two").css({"top": 0}); //Slides right under "one"
}
});
var clicked2=false;
$(".three").on('click', function(){
if(clicked2)
{
clicked2=false;
$(".four").css({"top": -100}); //Slides up 40 pixels
}
else
{
clicked2=true;
$(".four").css({"top": 0}); //Slides right under "one"
}
});
});
On a completely different note, any tips on how I could make the boxes start from the top of the page and have the box be larger rather than just a small strip of color?