Question

I’m trying to add a div under a link when it is clicked and then have that box go away after the next link is clicked and then have another div box under the next link.

Here is a fiddle I’m working on : http://jsfiddle.net/d0okie0612/geJM3/

HTML :

<div id="blackbar">
    <a class="link" href="#">Click here</a>
    <a class="link2" href="#">Click here</a>
    <a class="link3" href="#">Click here</a>
</div>

JavaScript :

$('a.link').on('click', function (e) {
    e.preventDefault();
    $('<div class="whitebar"><p>1</p></div>').appendTo('div#blackbar');
});

$('a.link2').on('click', function (e) {
    e.preventDefault();
    $('<div class="whitebar2"><p>2</p></div>').appendTo('div#blackbar');
});

$('a.link3').on('click', function (e) {
    e.preventDefault();
    $('<div class="whitebar3"><p>3</p></div>').appendTo('div#blackbar');
});

​​
CSS :

#blackbar  { background: black; width: 900px; height: 200px;}
.whitebar  { background: white; width: 40px; height: 30px; border: solid purple; z-index: 1000;}
.whitebar2 { background: white; width: 40px; height: 30px; border: solid purple; z-index: 1000; position: absolute; left: 90px;}
.whitebar3 { background: white; width: 40px; height: 30px; border: solid purple; z-index: 1000; position: absolute; left: 190px;}
a { color:white;}

I’m still learning jQuery, I’m sure this code could be improved.

Any help would be appreciated.

Answer 1

<div id="blackbar">
   <a class="link" href="#">Click here</a>
   <div class="whitebar"><p>1</p></div>    
   <a class="link2" href="#">Click here</a>
   <div class="whitebar2"><p>2</p></div>        
   <a class="link3" href="#">Click here</a>
   <div class="whitebar3"><p>3</p></div>        
</div>

$('#blackbar a').on('click', function(e){
    e.preventDefault();
    $(this).siblings('div').hide().end().next().show()
});

http://jsfiddle.net/x2ByZ/