How can i change the content of another div when i press a div in my slideshow?

Question

I have a slideshow and i want the background div to change background image and text. I am not sure how to acomplish this. Do you have tips? I uploaded what I have so far to jsfiddle. The background div is furthest down in the code.

I searched a lot for "replace div content on click", but i cant seem to be able to implement anything, need help.

[type=radio] {
  display: none;
}

#slider {
  left: 0px;
  top: 200px;
  color: white;
  height: 200px;
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  right: 30%;
}

.slidercontainer {
  position: absolute;
  padding-top: 100px;
}

#slider label {
  margin: auto;
  width: 13%;
  height: 63%;
  border-radius: 4px;
  position: absolute;
  left: 0;
  right: 0;
  cursor: pointer;
  transition: transform 0.4s ease;
}

#s1:checked~#slide4,
#s2:checked~#slide5,
#s3:checked~#slide1,
#s4:checked~#slide2,
#s5:checked~#slide3 {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .37);
  transform: translate3d(-30%, 0, -200px);
}

#s1:checked~#slide5,
#s2:checked~#slide1,
#s3:checked~#slide2,
#s4:checked~#slide3,
#s5:checked~#slide4 {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
  transform: translate3d(-15%, 0, -100px);
}

#s1:checked~#slide1,
#s2:checked~#slide2,
#s3:checked~#slide3,
#s4:checked~#slide4,
#s5:checked~#slide5 {
  box-shadow: 0 13px 25px 0 rgba(0, 0, 0, .3), 0 11px 7px 0 rgba(0, 0, 0, .19);
  transform: translate3d(0, 0, 0);
}

#s1:checked~#slide2,
#s2:checked~#slide3,
#s3:checked~#slide4,
#s4:checked~#slide5,
#s5:checked~#slide1 {
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, .3), 0 2px 2px 0 rgba(0, 0, 0, .2);
  transform: translate3d(15%, 0, -100px);
}

#s1:checked~#slide3,
#s2:checked~#slide4,
#s3:checked~#slide5,
#s4:checked~#slide1,
#s5:checked~#slide2 {
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .37);
  transform: translate3d(30%, 0, -200px);
}

#slide1 {
  background: #00BCD4
}

#slide2 {
  background: #4CAF50
}

#slide3 {
  background: #CDDC39
}

#slide4 {
  background: #FFC107
}

#slide5 {
  background: #FF5722
}


/*background div*/

.backgroundmusic {
  position: absolute;
  background-color: crimson;
  opacity: 0.7;
  top: 100px;
  left: 100px;
  width: 200px;
  height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<div class="backgroundmusic"></div>
<section id="slider">
  <input type="radio" name="slider" id="s1">
  <input type="radio" name="slider" id="s2">
  <input type="radio" name="slider" id="s3" checked>
  <input type="radio" name="slider" id="s4">
  <input type="radio" name="slider" id="s5">
  <label for="s1" id="slide1">
    <div class="vinylplay">
	    <a id="play-video" class="video-play-button" href="#">
        <span></span>
      </a>
      <div id="video-overlay" class="video-overlay">
        <a class="video-overlay-close">&times;</a>
      </div>
    </div>
    <img src="images/Ambient/maxresdefault.jpg" width="100%" height="100%" alt=""/>
  </label>
  <label for="s2" id="slide2">
    <div class="vinylplay">Play</div>
    <img src="images/Ambient/maxresdefault.jpg" width="100%" height="100%" alt=""/> 
  </label>
  <label for="s3" id="slide3">
    <img src="images/Ambient/hiroshiyoshimurawetlands.jpg" width="100%" height="100%" alt=""/>
  </label>
  <label for="s4" id="slide4">
    <img src="images/Ambient/maxresdefault.jpg" width="100%" height="100%" alt=""/>
  </label>
  <label for="s5" id="slide5">
    <img src="images/Ambient/pierloft.jpg" width="100%" height="100%" alt=""/>
  </label>
</section>

http://jsfiddle.net/5qcy9rvm/1/

Answer 1

http://jsfiddle.net/qv5e3znf/

$('#slider').click(function() {
    $('.backgroundmusic').css('background','blue');
})

Set the 'click' callback with jQuery, and use jQuery to change the css background of the element you want. Use $(selector).text() to change text content if you want.