Question

I have 4 divs in the image below. Each div is a link that now points to ‘#‘. How can I make it so that when I click a div the dotted line at the bottom expands to show another div.

Each “div link” has a different View (just a div) that it shows.

Here’s the code for the DIVs:

<div id="tour"> 
   <div id="link" onclick="location.href='#';"  >               
      <img src="images/icn1.png" alt="" />
      <h2>Pitch</h2>
      <p> blah blah blah balh blah blah blah blah balh blah blah blah blah balh <p>
    </div>

    <div id="link" onclick="location.href='#';" >
       <img src="images/icn2.png" alt="" />   
       <h2>Publish</h2>
       <p> blah blah blah balh blah blah blah blah balh blah blah blah blah balh <p>
    </div>
</div>

EDIT:

Would using jQuery Tabs be a good solution?

Answer 1

You might consider using the jQuery UI Tab. Each of your DIVs will be a Tab, and the View will be the Tab’s Content. Here’s a link: http://jqueryui.com/demos/tabs/#collapsible