I'm trying to change the background image for a div in my concrete5 site when a different item in an accordion menu is clicked. Im fairly new to JQuery/Javascript and have been using alert statements to check my functions are working, and those are functioning as normal.
I think the problem seems to be in referencing the Div through its class as my code simply isn't changing the background image when clicked
I've checked in the source code of my page and it the class Im trying to reference is definitely the one with a background image set already which Im attempting to swap when different sections of the menu are clicked.
<div class="ccm-faq-container anitya-accordion faq-accordion">
<dl>
<dt class="title" id="title1">
<a href="">
Guitar <i class="fa fa-chevron-down icon"></i>
</a>
</dt>
<dd class="content" style="display: block;">
<div class="content-inner"><p></p><p>Lessons</p><p></p></div>
</dd>
<dt class="title" id="title2">
<a href="">
Bass <i class="fa fa-chevron-down icon"></i>
</a>
</dt>
<dd class="content" style="display: none;">
<div class="content-inner"><p></p><p>Lessons</p><p></p></div>
</dd>
<dt class="title" id="title3">
<a href="">
Workshops <i class="fa fa-chevron-down icon"></i>
</a>
</dt>
<dd class="content" style="display: none;">
<div class="content-inner"><p></p><p>Workshops<span></span></p><p></p> </div>
</dd>
</dl>
</div>
<script type='text/javascript'>
$(function(){ // I use jQuery in this example
document.getElementById('title1').onclick =
function(){
$("div.ccm-custom-style-main1 grid-overlay").css('background-image', 'url("/application/files/5414/3153/4591/15401266516_84c767391f_k.jpg")')
};
document.getElementById('title2').onclick =
function () {
alert('this is title2')
};
document.getElementById('title3').onclick =
function () {
alert('this is title3')
};
});
</script>
Any help would be greatly appreciated :) Thank you!
