Essentially, I am looking for an element that, when clicked, activates a jQuery script to add or remove a specific class (in this case, adding a class that changes the background image CSS attribute) to only that particular element.
function readMore() {
var subID = event.target.id;
var footerTarget = $('[id='+subID+'][class="articleFooter"]');
var newTarget = $('[id='+subID+'][class="showArticlePara"]');
newTarget.toggle();
var footerTarget = $('[id='+subID+'][class="articleFooter"]');
if (newTarget.css("display") == "block") {
footerTarget.addClass("changeBackgroundImage");
}
else {
footerTarget.removeClass("changeBackgroundImage");
}
alert(footerTarget.class());
}
$(document).ready(function() {
});.articleSection {
width: 100%;
display: block;
font-family: Trebuchet MS;
font-size: 1.1em;
color: white;
margin-bottom: 25px;
padding-bottom: 3px;
background-color: RGBA(255, 255, 255, 0.1);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-radius: 2px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
}
.articleContent {
/*height: 70px;*/
padding: 10px 15px 5px 15px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-ms-box-sizing:border-box;
}
.articleVotes {
}
.voteBox {
}
.articleFooter {
width: 100%;
height: 10px;
content: 'more';
background-image:url('../Images/Icons/showMoreBlack13030.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
transition: 0.2s ease-in-out;
}
.articleFooter:hover {
background-image: url('../Images/Icons/chevron13040Blue.png');
}
.changeBackgroundImage {
width: 100%;
height: 10px;
content: 'less';
background-image:url('../Images/Icons/showLessBlack13030.png');
background-size: contain;
background-repeat: no-repeat;
background-position: 15px center;
transition: 0.2s ease-in-out;
}
.changeBackgroundImage:hover {
background-image: url('../Images/Icons/chevron13040BlueRotated.png');
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="articleSection">
<div class="articleContent">
<h2>Exciting new study shows that in any male group, at least one is gay</h2>
<div class="showArticlePara" id="one">
<p>
I really hope it's Luke, he's cute af.
</p>
</div>
</div>
<div class="articleVotes">
<div class="voteBox"></div>
</div>
<div class="articleFooter" id="one" onclick="readMore()"></div>
</div>When clicking on .articleFooter with id=subID, the paragraph associated with it toggles its display property using simple jQuery toggle(). I have experimented with toggleClass(), which successfully adds the class but does not remove it on the second click.
Finally, I attempted an if/else statement to check if the affected paragraph has display: none and then add or remove a class based on the result. However, this method also fails to remove the class on the second click.
Thank you for any suggestions or assistance provided.
jsfiddle link: https://jsfiddle.net/hm3y3848/