Geek asks and answers

Toggle item visibility in onClick () method

I have an unordered list and a bunch of articles, all with absolute positions at the top of the page and hidden. Each article is in a different div and has a different identifier. I would like to be able to click the list item and the corresponding article to become visible, and then when I click on another list item, the visible item disappears and a new article appears in its place corresponding to this article.

Here is 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 CSS

.fullarticle {
  width: 61%;
  margin-right: 2%;
  float: left;
  position: absolute; top: 80px; left: 37%;
  visibility: hidden;
}


.articlelist {
  float: left;
  width: 37%;
}
+3
source share
3 answers

If you use jQuery you can do:

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

Updated Fiddle

+2
source

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>
+2
source

head:

var toggleVisibility = function(element) {
    if(element.style.visibility=='visible'){
        element.style.visibility='hidden';
    } else {
        element.style.visibility='visible';
    }
};

onclicks ( ) onclick="toggleVisibility(document.getElementById('articleId'))", articleID - div s

visibility , display none block

var toggleVisibility = function(element) {
    if(element.style.display=='block'){
        element.style.display='none';
    } else {
        element.style.display='block';
    }
};

It's a little trickier but avoids importing a massive jQuery library for such a small task

+2
source

More articles:


All Articles