I am facing an issue with my parent <div> named #amwcontentwrapper. It contains a series of child divs with their own classes and ids.
My goal is to utilize jQuery to select these child divs, and if they have the class .amwhidden, I want to leave them as they are. However, if they do not have the class, I need to remove the .amwshown class and add the .amwhidden class.
The current code snippet I have is not functioning properly. I suspect that the issue lies in how I am selecting the child divs within the parent container.
If anyone can spot any obvious problems, your assistance would be greatly appreciated. Thank you!
if ($('#amwcontentwrapper > div').hasClass('amwhidden')) {
} else {
$('#amwcontentwrapper > div').fadeIn(600, function() {
$('#amwcontentwrapper > div').removeClass('amwshown');
$('#amwcontentwrapper > div').addClass('amwhidden');
});
}
Below is the basic HTML structure I am working with:
<div class="amwshown" id="amwintro">
Intro Section -- The intended behavior is to remove the 'amwshown' class and add the 'amwhidden' class when the jQuery script executes.
</div>
UPDATE: By implementing War10ck's suggested solution from the comments (i.e. using
$('#amwcontentwrapper > div.amwshown').amwhidden {
display:none;
}
.amwshown {
display:block;
}
Upon inspecting the Developer Tools, I noticed that when the jQuery script runs (triggered by a click event), the classes are updated. Nonetheless, elements that had the 'amwshown' class removed but still show on the page are also being augmented with a <style> tag setting them to display:block;.
Subsequently, when I attempt to hide one of the aforementioned <div> elements by changing its class to .amwhidden, the associated <style> tag responsible for displaying it remains unaffected. This leads to the element persisting on the page despite having the 'amwhidden' class assigned to it.
I have created a corresponding JSFiddle in case additional assistance is available!
`
$(document).ready(function() {
$('#buybutton').click(function() {
$('#amwcontentwrapper > div.amwshown').fadeIn(600, function() {
$(this).removeClass('amwshown').addClass('amwhidden');
});
if ($('#amwbuy').hasClass('amwshown')) {} else {
$('#amwbuy').fadeIn(600, function() {
$('#amwbuy').removeClass('amwhidden');
$('#amwbuy').addClass('amwshown');
});
}
});
$('#phdbutton').click(function() {
$('#amwcontentwrapper > div.amwshown').fadeIn(600, function() {
$(this).removeClass('amwshown').addClass('amwhidden');
});
if ($('#amwphd').hasClass('amwshown')) {} else {
$('#amwphd').fadeIn(600, function() {
$('#amwphd').removeClass('amwhidden');
$('#amwphd').addClass('amwshown');
});
}
});
});
#sidebar {
position: absolute;
left: 1%;
top: 1%;
font-size: 5em;
color: #000000;
width: 10%;
display: block;
background-color: red;
}
#amwcontentwrapper {
position: absolute;
left: 20%;
top: 5%;
}
.amwshown {
display: block;
}
.amwhidden {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="amwsidebar">
<span class="sidebarbutton" id="phdbutton">PhD Button</span>
<br />
<br />
<span class="sidebarbutton" id="buybutton">Buy Button</span>
</div>
<div id="amwcontentwrapper">
<div class="amwshown" id="amwintro">
<p>An intro section to welcome the visitor. Disappears when one of the other sections is clicked.</p>
<br />
<br />
</div>
<div class="amwhidden" id="amwbuy">
Buy Section
</div>
<div class="amwhidden" id="amwphd">
PhD Section
</div>
</div>`