Greetings all! I am a newbie in the world of development and also new to Stack Overflow. This is my maiden post seeking assistance on the following issue:
$(document).ready(function() {
$(".header").click(function() {
if ($(".header-content").is(':visible')) {
$(".header-content").slideUp(600);
}
else {
$(this).next(".header-content").slideDown(600);
}
});
I have included images of the project to provide clarity.
The first image depicts the initial state of the page when loaded. The second image showcases the appearance after clicking on the 'tracking' div.
I am looking to code a functionality that fulfills the following criteria: 1. Upon loading the page, all divs with the class 'header' should resemble the first image.
When any area within one of the divs is clicked, the 'header-content' class should be set to display block, although initially it is set to display:none in the CSS.
Upon clicking on another div while one is already open, the open div should be closed before opening the clicked div.
Lastly, clicking on the same div twice should result in its closure.
I trust that my issue is clear now. Many thanks in advance for any assistance provided.