Is there a way I can connect content with multiple divs? - html

Question

I'm not sure how to ask this question so below is an visualization of what I want to achieve.
Please let me know if there is anything I can clarify!
Clarification:
At slide one, image 01 and image 02 are visible. Only when the person clicks on the images does the text and title div become visible. More importantly, the text box must be coherent with the page-wrapper. For example, if I were to set the text div to float:right, it will float on the right side of the page-wrapper.
Thank you in advance.

Answer 1

You need some javascript to get this behaviour i think. You can try something like this:
Everything in a little bit pseudo code.
HTML:
<img src="..." class="img1 clickImage">
<img src="..." class="img2 clickImage">
<div class="imageTitles">
<div class="img1 imgTitle">TITLETEXT</div>
<div class="img2 imgTitle">TITLETEXT</div>
</div>
<div class="imageInformations">
<div class="img1 imgInformation">INFORMATION img1</div>
<div class="img2 imgInformation">INFORMATION img2</div>
</div>
And some jQuery:
jQuery('.clickImage').on('click', function() {
var imgNumber = jQuery(this).getClass().replace('clickImage', '');
jQuery('imageTitles .imgTitle').hide(); //hide all image Titles
jQuery('imageTitles .imgTitle.' + imgNumber).show(); //show title for e.g. img1
//repeat this for imgInformation
});
Everything a little bit rough, but i hope it gives you an idea what you need to do.
EDIT:
Code now looks like this:
HTML:
<img src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg" class="img1 clickImage">
<img src="http://media.tumblr.com/tumblr_mcf11pk4nj1ru82ue.jpg" class="img2 clickImage">
<div id="page-wrap">
<div class="imageTitles">
<div class="img1 imgTitle">TITLETEXT</div>
<div class="img2 imgTitle">TITLETEXT</div>
</div>
<div class="imageInformations">
<div class="img1 imgInformation">INFORMATION img1</div>
<div class="img2 imgInformation">INFORMATION img2</div>
</div>
</div>
JS:
jQuery('.imageTitles .imgTitle').hide();
jQuery('.imageInformations .imgInformation').hide();
jQuery('.clickImage').on('click', function () {
var imgNumber = jQuery(this).attr("class").replace('clickImage', '');
jQuery('.imageTitles .imgTitle').hide(); //hide all image Titles
jQuery('.imageTitles .imgTitle.' + imgNumber).show(); //show title for e.g. img1
jQuery('.imageInformations .imgInformation').hide();
jQuery('.imageInformations .imgInformation.' + imgNumber).show();
});

Answer 2

There are many ways to achieve this.
1) with every thing static, ie info about image is already available in the page in different div's.
ex: working
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.switch').hide();
});
function myInfo(myId)
{
$('.switch').hide();
$('#title'+myId).show();
$('#description'+myId).show();
}
</script>
<table>
<tr>
<td>
<!-- Images -->
<img onclick="return myInfo('1')" id='image1' height="60" width="60" src="http://static3.businessinsider.com/image/52cddfb169beddee2a6c2246/the-29-coolest-us-air-force-images-of-the-year.jpg" alt="Image1"><br/>
<img onclick="return myInfo('2')" id='image1' height="60" width="60" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR6I83EILo3XKIsqZ-0Q5JAEw38xGzsy1g_iKImqjBrMVaOHYb4Zg" alt="Image2">
</td>
<td>
<div id="title1" class="switch"> Image 1</div>
<div id="title2" class="switch"> Image 2</div>
</td>
<td>
<div id="description1" class="switch"> Information about Image 1 </div>
<div id="description2" class="switch"> Information about Image 2 </div>
</td>
</tr>
</table>
2) You can achieve this using AJAX calls for image information, in this case only 1 div for title and 1 for info is enough i you want to use else 1 div is enough. On click of image make an AJAX call to get the image info and display it in the div.
These are 2 ways and there are many more.