循环切换单个div

Question

In rendering out data within HTML, which prints out a div down the page, for every row found in the database, I'm trying to find a way to allow each button that sits in each div to toggle the individual example when clicked (with a default of display:none upon loading the page) - something such as:

function toggle_div(id) {

    var divelement = document.getElementById(id);

    if(divelement.style.display == 'none')
        divelement.style.display = 'block';
    else
        divelement.style.display = 'none';   
}

An example of the final markup :

<div>
  <div class="wordtitle">Word</div>
  <div class="numbers">1</div>

  <div class="definition">Definition</div>
  <button class="button" id="show_example" onClick="toggle_div('example')">Show example</button>

  <div class="example" id="example">Example 1</div>
</div>

<div>
  <div class="wordtitle">Word</div>
  <div class="numbers">2</div>

  <div class="definition">Definition</div>
  <button class="button" id="show_example" onClick="toggle_div('example')">Show example</button>

  <div class="example" id="example">Example 2</div>
</div>

getElementById() only toggles the first div's example, and getElementsByClass() hasn't seemed to work so far - not too sure how to do this - any ideas much appreciated!

Answer 1

First rule, do not insert multiple elements with the same ID. IDs are meant to be unique .

What you need is to toggle the example near the button you clicked, and not any (or all) .example to be showed / hidden. To achieve this, considering you used the [jquery] tag in your question, you can either use a selector to get the nearest .example of your button, or use jQuery's built-in functions to get it ( .siblings() ).

I would personally put the onclick out of your markup, and bind this custom function in your javascript.

Another important thing : if javascript is disabled client-side, the user won't ever see your example, as they are hidden by default in CSS. One fix would be to hide it initially with JS (see the snippet for this).

Here's a demonstration of what I mean :

 $('.example-trigger').click(function() { //Use the current button which triggered the event $(this) //Find the sibling you want to toggle, of a specified class .siblings('.example-label') //Toggle (hide or show) accordingly to the previous display status of the element .toggle(); }); //Encouraged : hide examples only if Javascript is enabled //$('.example-label').hide(); 

 .example-label { display: none; /* Discouraged : if javascript is disabled, user won't see a thing */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div> <button class="example-trigger">Toggle example 1</button> <span class="example-label">Example 1</span> </div> <div> <button class="example-trigger">Toggle example 2</button> <span class="example-label">Example 2</span> </div> <div> <button class="example-trigger">Toggle example 3</button> <span class="example-label">Example 3</span> </div> 

Answer 2

As @Sean stated, you need the ID to be unique since that's the way you are getting your elements.

$words .= '<div class="wordtitle">' . $word .'</div>

<div class="numbers">' .  $i . '</div> 
<div class="definition">' . $definition . '</div>
<button class="button" id="show_example" onClick="toggle_div(\'example\''.$i.')">
show example</button>
<div class="example" id="example'.$i.'">' . $example . '</div>
<br/><br/>';
$i++;

#show_example will also be repeating so you will probably want to change that to a class.

Answer 3

Another answer, only because I had the answer ready and was called away before I could post it. So here it is.

Notice that for repeating elements, classes are used instead of IDs. They work just as well, and (as everyone else has already said), IDs must be unique.

jsFiddle demo

HTML:

<div class="def">
    <div class="wordtitle">Aardvark</div>
    <div class="numbers">1</div>
    <div class="definition">Anteater</div>
    <button class="button show_example">show example</button>
    <div class="example" id="example">The aardvark pushed its lenghty snout into the anthill and used its long, sticky tongue to extract a few ants.</div>
</div>
<div class="def">
    <div class="wordtitle">Anecdote</div>
    <div class="numbers">2</div>
    <div class="definition">Amusing Story</div>
    <button class="button show_example">show example</button>
    <div class="example" id="example">The man told an anecdote that left everyone laughing.</div>
</div>

jQuery:

var $this;
$('.show_example').click(function() {
    $this = $(this);
    if ( $this.hasClass('revealed') ){
        $('.example').slideUp();
        $('.show_example').removeClass('revealed');
    }else{
        $('.example').slideUp();
        $('.show_example').removeClass('revealed');
        $this.parent().find('.example').slideDown();
        $this.addClass('revealed');
    }
});