asked on

Load a div on click - based on link ID

have this page here: http://cl.ly/2J170M3f340X3M2A1O1I - for now I am going to try to code a section where:

- On click of the left pane, it loads in a hidden div. I am thinking I can have it based on the ID of the <a> and the <div id="XX"> and keep it wired that way.

- I will have the same for all 4 tabs on the top. What would be the best way to load a hidden div on click onto that main content area?

Trying to develop this using jQuery.

- Click - grab ID
- Find a DIV with the same ID
- Grab HTML
- Insert in to DIV

Is there a faster way to do that?

Thanks.

colr__

- Click - grab ID
- Find a DIV with the same ID

The id attribute MUST be unique, so you cant grab an id and look for something with the same id - yiou'd be selectuing the same dom element.

To grab the html, use

$('...').html()

Open in new window

Once you have this, you can use the same function to insert it into the div. If the div has id="blah" and the clicked element has id="grabbed":

$('#blah').html($('#grabbed:first').html());

Open in new window

zappafan2k2

It's a bit difficult to be very helpful without seeing markup, only the screenshot. But I will try.

For one thing, you can't have two elements with the same id. When I've done something like this, I usually use an attribute in the <a> tag which matches the id of the corresponding <div>.
For instance,

<a href="#" rel="div_a" onClick="loadDiv(this);">Blah</a>
<a href="#" rel="div_b" onClick="loadDiv(this);">Blah</a>
...
<div id="content">...</div>
...
<div id="div_a" style="display: none;">description...</div>
<div id="div_b" style="display: none;">description...</div>

Open in new window

Then your jQuery might look something like this

function loadDiv(elem) {
	var myID = $(elem).attr('rel');
	$('#content').html($('#'+myID).html());
	}

Open in new window

There are hundreds of ways to accomplish what you want to do. This is just one way.

catonthecouchproductions

ASKER

As far as markup I would have that main content area repeated for X amount of products on the left and on click they will populate, going by ID.

Ryan

ASKER CERTIFIED SOLUTION

zappafan2k2

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial