Jquery/Javascript to hide/show div in li

Question

I have many div's on a page, like the one below with different information, using the same classes.

<div class="one-third">
    <ul class="img-list">
        <a href="#" target="_blank">
            <li>
                <img src="#" alt="" />
                <span class="text-content"><h3 style="color:white" id="one">BRIAN FARGO</h3></span>
                <h5 class="text-content-desc" id="two">CEO, inXile entertainment</h5>
                <a href="https://twitter.com/BrianFargo">
                <img class="speaker-twitter-profile" src="#"></a>
                <div class="info-btn" onClick="swap('one','two')">info</div>
            </li>
        </a>
    </ul>
</div>

And a javascript functions is:

function swap(one, two) {
    document.getElementById(one).style.display = 'block';
    document.getElementById(two).style.display = 'none';
}

The problem is, when I click on the "info" button, it effects on all div's, but I need it to only effect on the div which button is clicked.

Like if I click on info of BRIAN FARGO, it should only show/hide/effect BRIAN FARGO'S bio. Not all other speakers.

Answer 1

I don't understand why is your function named swap() when all it does is changes the display attribute of one element to block (which it already is by default) and changes another elements display to none effectively hiding it.

If you have many divs with the same id, that too could be your problem. Id should be unique for each element