Hey there, I have a small issue with some HTML divs and show/hide functionality.
I'm trying to make it so that only one div is shown per click, but my current jQuery code is showing all the divs at once.
Any suggestions on how to fix this?
jQuery(document).ready(function() {
var toggleContent = jQuery('.insideContent');
toggleContent.addClass('hidden');
var thisElemnt = $(this);
jQuery('.button').on('click', function() {
thisElemnt.find('.insideContent').removeClass('hidden').addClass('show');
});
});
jQuery(document).ready(function() {
var toggleContent = jQuery('.insideContent');
toggleContent.addClass('hidden');
var thisElemnt = $(this);
jQuery('.button').on('click', function() {
thisElemnt.find('.insideContent').removeClass('hidden').addClass('show');
});
});.hidden {
display: none !important;
}
.show {
display: block !important;
}
.list {
direction: inherit;
display: flex;
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="list">
<div class="col-lg-2 workImage">
<div class="itemTitle">
<h2 class="page-header text-center">Item</h2>
<button class="button">Open Project</button>
</div>
<div class="insideContent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="col-lg-2 workImage">
<div class="itemTitle">
<h2 class="page-header text-center">Item</h2>
<button class="button">Open Project</button>
</div>
<div class="insideContent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="col-lg-2 workImage">
<div class="itemTitle">
<h2 class="page-header text-center">Item</h2>
<button class="button">Open Project</button>
</div>
<div class="insideContent">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>