How to toggle content in a div and change content in another div, on click

Question

So this is for a home renovation site.. I have 2 columns, on the left side I want thumbnails of each property and on the right side is where the property images/description will be displayed when a property's thumbnail is clicked.. but at the same time I also want it to toggle a div under the thumbnail that was clicked to display mini "before" and "after" thumbnails. I want these only to display when the thumbnail is clicked and disappear either when it is clicked again or if another property's thumbnail is clicked, and of course then the before and after pictures for that property would display underneath... I can do this part with css and jquery and I found a way to change the content in the div based on which image is clicked.. but I cannot seem to do both at the same time....

I hope I'm explaining this right...

made a jsfiddle thingy https://jsfiddle.net/jeni/g1dhocyw/

this is the css i used to toggle the before and after pics

.collapse{
font-size: 31px;
display:block;
}
.collapse + input{
display:none;
}
.collapse + input + *{
display:none;
}
.collapse+ input:checked + *{
display:block;
}

I found a jsfiddle and messed around with it so it does what i want.... http://jsfiddle.net/jeni/8eqsbhet/ but when i try to incorporate it into my other jsfiddle the css stuff doesn't work

halp meh.

Answer 1

Changed the checkboxes to radio.

<input id="_1" type="radio" name="xyz">...

And updated the last "for" and "id" that had the value "_2" to "_3".

<label class="collapse" for="_3">

<input id="_3" type="radio" name="xyz">

See revision here: https://jsfiddle.net/3kqq2yx5/

---

Update:

Revised with jQuery Code: https://jsfiddle.net/3kqq2yx5/2/