A custom feature has been developed that allows for a slideDown effect when the title is clicked, revealing a new section. Initially, the title displays a plus symbol to indicate that it can be expanded. However, upon clicking the title, the intention is to change the background-image to show a minus icon, signaling that the section has collapsed.
The image manipulation is achieved using the pseudo element :before. In the JavaScript code, the goal is to switch the plus symbol with the minus symbol by adding the opened class with the addClass function. The attempt to add the class is as follows:
.infoTitles:before.open
If there are any insights into what might be going wrong in this setup, please share your thoughts!
$('.faqBlock').click(function() {
var relative = $(this);
if (!relative.hasClass('opened')) {
$('.opened').removeClass('opened').next('.infoFaqContainer').slideUp(500);
relative.addClass('opened').next('.infoFaqContainer').slideDown();
$('.infoTitles:before').addClass('opened'); //attempting to add the class for the icon here
} else {
relative.removeClass('opened').next('.infoFaqContainer').slideUp(500);
}
return false;
});.faqTitle {
font-size: 1.8rem;
margin-bottom: 50px;
}
.faqCont {
width: 100%;
height: auto;
border-bottom: 1px solid #2E393F;
}
.faqBlock {
width: 100%;
padding: 40px 0;
cursor: pointer;
}
.infoTitles {
color: #2E393F;
font-family: 'Quicksand', sans-serif;
font-size: 1.5rem;
}
.infoTitles:before {
content: '';
vertical-align: bottom;
float: left;
margin-right: 8px;
background-image: url('https://www.colourbox.com/preview/5697410-icon-plus-black.jpg');
background-size: 15px 15px;
width: 15px;
height: 15px;
display: block;
}
.infoTitles:before.open {
content: '';
vertical-align: bottom;
float: left;
margin-right: 8px;
background-image: url('https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/minus-big-512.png');
background-size: 15px 15px;
width: 15px;
height: 15px;
display: block;
}
.infoFaqContainer {
display: none;
}
.infoFaqInner {
padding: 0 5px 40px 5px;
}
.faqDesc {
font-family: 'Open-sans', sans-serif;
font-size: 1rem;
/*letter-spacing: .1rem;*/
line-height: 1.5em;
color: #2E393F;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="weddingInfoBlock">
<div class="wInfoBlockCont">
<span class="wIBCTitle">FAQ's</span>
<div class="faqCont">
<div class="faqBlock">
<div class="infoTitles">Title</div>
</div>
<div class="infoFaqContainer">
<div class="infoFaqInner">
<p class="faqDesc">
Text
</p>
</div>
</div>
</div>
</div>