Switch visibility of element in onClick() method

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%;
}

Answer 1

If you use jQuery, you can do:

$('.articlelist ul li').click(function() {
    var i = $(this).index();
    $('.fullarticle').hide();
    $('#article' + (i+1)).show();
});

Updated Fiddle

Answer 2

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 divs

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

Answer 3

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>