Javascript multiple elements same function, one at a time

Question

I am looking for a way to make my idea work. I have several team members, and i want them to open open up when I click on them one by one.

So basically, 4 pictures in a row, if I click the first picture, it expands (shows a previously hidden element), but the other ones stay closed. If I click the second picture, now both the first and the second one are open (because i opened the first one previously), but the remaining 2 remain closed.

I want to achieve that with a single function, because I want to keep the code clean. I did separate functions, separate element ID's for all 4 team members and it worked, but now, when I wanted to use this code for 20 elements at once, it tricky, because I dont want to keep spamming functions and elements for each new member.

The current code doesn't work, for some reason, please take a look.

<script>
    function ShowText() {
        var itemtext = document.getElementByClass('aboutusteamitemtext');
        var itemtitle = document.getElementByClass('aboutusteamitemimgtext');
        var itembg = document.getElementByClass('aboutusteamitemimgbg');

        if (itemtext.style.display === "block") {
            itemtext.style.display = "none";
            itemtitle.style.background = "#50a8ff";
            itembg.style.backgroundImage = "url('http://www.blabla.com/wp-content/icons/moreinfo.png')";
        } else {
            itemtext.style.display = "block";
            itemtitle.style.background = "#E8443D";
            itembg.style.backgroundImage = "url('http://www.blabla.com/wp-content/icons/hideinfo.png')";
        }
    };
</script>
<div class="aboutusteam">
    <div class="aboutusteamitem">
        <div class="aboutusteamitemimg" onclick="ShowText()">
            <img src="http://www.blabla.com/wp-content/uploads/2013/06/davefake1.jpg">
            <div class="aboutusteamitemimgbg"></div>
            <div class="aboutusteamitemimgtext">

<h4>David Jones</h4>
Marketing Director</div>
        </div>
        <div class="aboutusteamitemtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
    </div>
    <div class="aboutusteamitem">
        <div class="aboutusteamitemimg" onclick="ShowText()">
            <img src="http://www.blabla.com/wp-content/uploads/2013/06/thomasfake1.jpg">
            <div class="aboutusteamitemimgbg"></div>
            <div class="aboutusteamitemimgtext">

<h4>Thomas Nguen</h4>
Operations Director</div>
        </div>
        <div class="aboutusteamitemtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
    </div>
    <div class="aboutusteamitem">
        <div class="aboutusteamitemimg" onclick="ShowText()">
            <img src="http://www.blabla.com/wp-content/uploads/2013/06/saya2.jpg">
            <div class="aboutusteamitemimgbg"></div>
            <div class="aboutusteamitemimgtext">

<h4>Sayaka Olivie</h4>
Senior Designer</div>
        </div>
        <div class="aboutusteamitemtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
    </div>
    <div class="aboutusteamitemlast">
        <div class="aboutusteamitemimg" onclick="ShowText()">
            <img src="http://www.blabla.com/wp-content/uploads/2013/06/philfake1.jpg">
            <div class="aboutusteamitemimgbg"></div>
            <div class="aboutusteamitemimgtext">

<h4>Phillip Ivetkovich</h4>
Senior Designer</div>
        </div>
        <div class="aboutusteamitemtext">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</div>
    </div>
</div>

Answer 1

Please avoid:

• DRY – don't repeat yourself
• Run inline javascript with onclick

You need to toggle CSS class on clicked elements

(function () {
    var links = Array.prototype.slice.call(document.querySelectorAll('ul li')); // CSS selector for elements that needs toggle

    links.forEach(function (link) {
        link.addEventListener('click', function () {
            toggleClass('active', this);
        });
    });

    function toggleClass(className, element) {
        element.classList.toggle(className);
    }
}());

http://jsfiddle.net/LP4dp/