I am looking to create a toggle effect where a div opens, loads a page within it, and then can be closed again.
My goal is to achieve this functionality with multiple links on the page.
<div id="main-nav">
<div id="menu-container">
<div id="menu">
<ul>
<li><a href="home.html"></a></li>
<li id="clicklink"><a href="#">mission</a></li>
<li><a href="#">leadership</a></li>
<li><a href="#">awards</a></li>
<li><a href="#">sustainability</a></li>
<li><a href="#">faq</a></li>
</ul>
</div>
<div id="clickme3">
<img src="images/logo-sm.png">
</div>
</div>
<div id="content-load">
</div>
</div>
$("#clicklink").toggle(function () {
$("#main-nav").animate({
height: "300",
}, 1000, function () {
$("#content-load").load("contentpage.html", function () {
})
function () {
$("#main-nav").animate({
height: "40",
}, 1000, )
};
});
});
I have attempted to implement this functionality, but I am encountering issues.
While I have managed to make it work in some capacity, the toggling feature is not functioning as desired.
$("#clicklink").click(function () {
$("#main-nav").animate({
height: "300",
}, 1000, function () {
$("#content-load").load("contentpage.html", function () {
})
});
});
As someone new to jQuery, I am eager to learn more about how to achieve this toggle effect.
You can view the current progress here http://billygoforth/learning/CMD
Currently, the navigation shifts upward correctly and the external content is loaded below, however, I am striving for the additional feature of collapsing the div when the link is clicked again so that I can apply this behavior to other link IDs.
Thank you in advance!