Show/Hide mulitple DIVs at the same time

Question

I want to allow the user to see the content of an article or view just a list. However when I try this it only hides the first instance:

HTML

    <div id="title">Title</div>
    <div id="articlebody">Blah blah blah</div>
    <div id="title">Title 2</div>
    <div id="articlebody">2. Blah blah blah</div>
    <div id="title">Title 3</div>
    <div id="articlebody">3. Blah blah blah</div>
    ... And so on for 10 articles

Javascript so chage options

    <a href="#" onClick="document.getElementById('articlebody').style.display='none';">View title list only</a>
    <a href="#" onClick="document.getElementById('articlebody').style.display='block';">View the whole body</a>

As I say that code will hide article body 1, but not the rest.

Answer 1

Your html has some big problems:

first: The id -attribute has to be unique in the whole document. For that reason, getElementById only returns one value (the first element which is found in the document).

use class instead and the according selector

getElementsByClassName

second: Use an external function with your onclick.

<a onClick="yourfunction()">...</a>

and in the script-block:

function yourfunction(){
   var el = document.getElementsByClassName(<yourclassname>);
   for (var i = 0; i < el.length; i++){
         el[i].style.display='none';
   }
}

EDIT: for compatibility-reasons you should use querySelector() or querySelectorAll() (see Article on MDN) , since it is supported by IE8+ while getElementsByClassName is not supported by IE8. Also it's closer to the jQuery Syntax and thus more familiar to the most webdev guys;).

Answer 2

You can't have 2 or more elements with the same ID, that is invalid HTML.

My suggestion would be to change these to classes and use jQuery to hide/show:

<div class="title">Title</div>
<div class="articlebody">Blah blah blah</div>
<div class="title">Title 2</div>
<div class="articlebody">2. Blah blah blah</div>
<div class="title">Title 3</div>
<div class="articlebody">3. Blah blah blah</div>

<a href="#" onClick="$('.articlebody').hide(); return false;">View title list only</a>
<a href="#" onClick="$('.articlebody').show(); return false;">View the whole body</a>

A neater way would be to create an event listener, meaning you can remove your onClick attributes:

<div class="title">Title</div>
<div class="articlebody">Blah blah blah</div>
<div class="title">Title 2</div>
<div class="articlebody">2. Blah blah blah</div>
<div class="title">Title 3</div>
<div class="articlebody">3. Blah blah blah</div>

<a href="#" class="viewTitleListOnly">View title list only</a>
<a href="#" class="viewWholeBody">View the whole body</a>

<script type="text/javascript">
    $(function(){
        $(".viewTitleListOnly").click(function(e){
           e.preventDefault(); //Prevents browser adding hash tag to URL
           $(".articlebody").hide();
        });
        $(".viewWholeBody").click(function(e){
           e.preventDefault(); //Prevents browser adding hash tag to URL
           $(".articlebody").show();
        });
    });
</script>

Answer 3

id不适用于多个实例，您需要使用一个类将其全部隐藏或设置单独的id并分别隐藏它们

Answer 4

You can't have more one element with the same id in your html! this can be easily accomplished by either putting everything into a wrapper element and hide that one, or use classes and selectors such as those in jQuery $('.myclass').hide();

Answer 5

You can't reliably reuse id s.

Instead, use class names, or get div elements by tag names.

document.getElementsByClassName("item");

document.getElementsByTagName("div");