If you use jQuery, you can do:
$('.articlelist ul li').click(function() {
var i = $(this).index();
$('.fullarticle').hide();
$('#article' + (i+1)).show();
});
Question
I have an unordered list and a bunch of articles, all with absolute positions at the top of the page and hidden. Each article sits in a different div and has a different ID. I'd like to be able to click a list item and the corresponding article to become visible, and then when I click a different list item, the visible item disappears and the new article that corresponds with that article appears in its place.
Here's the HTML
<div class="articlelist">
<ul>
<li style="display:block;" onclick="document.getElementByClass('fullarticle').style.visibility='hidden'" onclick="document.getElementById('article1').style.visibility='visible'">ARTICLE 1</li>
<li style="display:block;" onclick="document.getElementByClass('fullarticle').style.visibility='hidden'" onclick="document.getElementById('article2').style.visibility='visible'">ARTICLE 2</li>
<li style="display:block;" onclick="document.getElementByClass('fullarticle').style.visibility='hidden'" onclick="document.getElementById('article3').style.visibility='visible'">ARTICLE 3</li>
<li style="display:block;" onclick="document.getElementByClass('fullarticle').style.visibility='hidden'" onclick="document.getElementById('article4').style.visibility='visible'">ARTICLE 4</li>
</ul>
</div>
<div class="fullarticle" id="article1">
<h1>ARTICLE 1</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article2">
<h1>ARTICLE 2</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article3">
<h1>ARTICLE 3</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article4">
<h1>ARTICLE 4</h1>
<p>ABCDEFGH</p>
</div>
and here's the CSS
.fullarticle {
width: 61%;
margin-right: 2%;
float: left;
position: absolute; top: 80px; left: 37%;
visibility: hidden;
}
.articlelist {
float: left;
width: 37%;
}
Solution 2
If you use jQuery, you can do:
$('.articlelist ul li').click(function() {
var i = $(this).index();
$('.fullarticle').hide();
$('#article' + (i+1)).show();
});
OTHER TIPS
inside of the head
:
var toggleVisibility = function(element) {
if(element.style.visibility=='visible'){
element.style.visibility='hidden';
} else {
element.style.visibility='visible';
}
};
and then change the onclicks (if you insist on using them) to onclick="toggleVisibility(document.getElementById('articleId'))"
where articleID
is the ID of one of the article div
s
BUT
hiding and showing content with visibility
will keep the lower items under their invisible partners, so use display
with none
and block
instead
var toggleVisibility = function(element) {
if(element.style.display=='block'){
element.style.display='none';
} else {
element.style.display='block';
}
};
This is a little bit more complicated, but avoids importing the massive jQuery library for so small a task
If you have jQuery:
<div class="articles">
<div class="articlelist">
<ul>
<li style="display:block;" onclick="toggleArticles('article1')">ARTICLE 1</li>
<li style="display:block;" onclick="toggleArticles('article2')">ARTICLE 2</li>
<li style="display:block;" onclick="toggleArticles('article3')">ARTICLE 3</li>
<li style="display:block;" onclick="toggleArticles('article4')">ARTICLE 4</li>
</ul>
</div>
<div class="fullarticle" id="article1">
<h1>ARTICLE 1</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article2">
<h1>ARTICLE 2</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article3">
<h1>ARTICLE 3</h1>
<p>ABCDEFGH</p>
</div>
<div class="fullarticle" id="article4">
<h1>ARTICLE 4</h1>
<p>ABCDEFGH</p>
</div>
</div>
<script>
function toggleArticles(articleID) {
$('#articles .fullArticle').hide(); // this hides all currently open articles (if any);
$('#articles #' + articleID).show(); // show article
}
$('#articles .fullArticle').hide();
</script>