Switch divs through sidemenu

Question

I'm pretty new to this and sorry for the title, I didn't know what else to call it.

I'm trying to make a little menu with 2 divs inside a div. To the left a div with text. To the right a div with multiple images which, when clicked, link to other pieces of text shown in the left divs.

And when the other text appears the image directing to the first piece of text goes back to the menu on the right side.

I know I'm probably not explaining it all too well. I don't know how else to explain it.

This is the html, maybe it helps

<div id="home">
    <div id="leftBlock">
        <img src="/images/links/image1.png" alt="image 1"width="160"/>
        #atekst#
    </div>
    <div id="rightBlock">
        <img src="/images/links/image2.png" alt="image 2" width="160"/>
        <img src="/images/links/image3.png" alt="image 3" width="160"/>
    </div>
</div>

Shew - I think we might need a little bit more to work with here... Im slightly confused! — Fizor, Apr 14 '14 at 11:32
@Mike me too. Dear user3481441 could you try to create a fiddle as jsfiddle.net with as far as you can go and then try to explain what is not working as expected? maybe also post a picture of what you want — caramba, Apr 14 '14 at 11:34
Are you trying to link to contents in the page using one of the images on the right side. I think you can try in page html linking ref http://www.w3schools.com/html/tryit.asp?filename=tryhtml_link_locations — Rupam Datta, Apr 14 '14 at 11:47
you need when you click on a,b or c, it will slide to right and your text content visible? — Atal Shrivastava, Apr 14 '14 at 11:53
When I click on B, I need the A to go back to the right div and want the left div to show the content of B. — , Apr 14 '14 at 11:55
[check here](http://stackoverflow.com/questions/21253306/sliding-multiple-elements-on-click) Possibly the same question. — Atal Shrivastava, Apr 14 '14 at 11:59

score 0 · Accepted Answer · edited Apr 24 '14 at 14:01

0

Sorry for the delay, Here is a Work in progress fiddle for you. I haven't manged to add the text functionality for you just yet, because I have other work. But I will do this ASAP.

This should set you on your way in the meantime.

    $('#rightBlock').on('click', '.image', function(e) {
  $('.YourPic').children('img').attr('src', $(e.target).attr('src'));
 });

Essentially it looks at your righBlock div and the images therein, and onclick it will add them to another div with a class of "YourPic"

EDIT: Hey, so here is the updated fiddle which hides the image on the right. I'm not sure if this is the most effective / efficient way of doing it, but that's how I approached it.

edited Apr 24 '14 at 14:01

user229044

232,980
40
330
338

answered Apr 14 '14 at 12:33

Fizor

1,480
1
16
31

Thanks a lot, this is in the direction i had in mind. Except when clicking on the A, it will show on the left, but the A must disappear from the right div. – Apr 14 '14 at 12:37
I put a new fiddle in the answer above. Cheers, mike – Fizor Apr 14 '14 at 12:51
You are welcome. Should I still add the text a bit later on, or are you good? :) – Fizor Apr 14 '14 at 12:55
If that would be possible it'd be even better! – Apr 14 '14 at 12:58
If you don't mind a few span tags and more hiding and showing, you could use this... http://jsfiddle.net/WnC9B/207/ – Fizor Apr 14 '14 at 13:06

Switch divs through sidemenu

1 Answers1