Avatar of catonthecouchproductions
Flag for United States of America 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?

JavaScriptWeb Languages and Standards

Avatar of undefined
Last Comment

8/22/2022 - Mon

- 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

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":

Open in new window


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');

Open in new window

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

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.

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck

View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.