I'm attempting to create a link that will toggle hide/show between two divs, and while this concept is not uncommon, I am facing some difficulties. My HTML structure is as follows:
<div id="wrapper">
<div id="tog_A">
<div id="tog_B">
</div>
<a href="#" id="link">Toggle</a>
Here is the CSS:
#tog_A {
display:block;
}
#tog_A {
display:block;
}
Despite finding various solutions online, it seems that there is a conflict with other JavaScript code on my website. As a JavaScript beginner, I could really use some guidance on how to integrate these scripts seamlessly.
The current JavaScript code causing conflicts is:
//Load when dom ready
jQuery(function() {
// click listener for anchors
jQuery(document).on("click",'a[href^="#"]', function(e) {
// prevent click and side effects
e.preventDefault();
// do the scroll
jQuery('body, html').animate({
scrollTop : jQuery(this.hash).offset().top
});
//change state of button
var oldHash = jQuery(this.hash).attr("id").split("-");
var oldNr = parseInt(oldHash[1],10);
var nrOfAllSections = jQuery('[id^="section-"]').length;
var nr = oldNr == nrOfAllSections ? 1 : oldNr+1;
if(oldNr == nrOfAllSections) {
jQuery(this).text("Top ▴");
} else {
jQuery(this).text("Down ▾");
}
var newHash = "#"+oldHash[0]+"-"+ nr;
jQuery(this).attr("href", newHash);
});
jQuery(document).on('click', "#scrollToInfo", function(e) {
e.preventDefault();
var nrOfAllSections = jQuery('[id^="section-"]').length;
var hrefHash = "#section-" + nrOfAllSections;
var ypos = jQuery(hrefHash).offset().top;
window.scrollTo(0, ypos);
jQuery('a#scrollToBottom').text("Top ▴").attr("href", "#section-1");
});
});