On click show / hide content

Question

I have a problem with javascript show/hide content from div. When I click on the first button I got content from that but when I click on the second I need to hide content from first and show content from second div. My code for this is:

<script type="text/javascript">
            function showHideDiv(ele) {
                var srcElement = document.getElementById(ele);
                if (srcElement != null) {
                    if (srcElement.style.display == "block") {
                        srcElement.style.display = 'none';
                    }
                    else {
                        srcElement.style.display = 'block';
                    }
                    return false;
                }
            }
            function showHideDiv1(ele) {
                var srcElement = document.getElementById(ele);
                if (srcElement != null) {
                    if (srcElement.style.display == "block") {
                        srcElement.style.display = 'none';
                    }
                    else {
                        srcElement.style.display = 'block';
                    }
                    return false;
                }
            }
        </script>

HTML:

<div class="listsearch-header fl-wrap">
<h3>
<a class="button-one" onClick="showHideDiv('divMsg')" title="Relevant Title" href="#">Places</a>
<a class="button-two" onClick="showHideDiv1('divMsg1')" title="Relevant Title" href="#">Events</a>
</h3>
<div id="divMsg" style=" display:none">
<b>Places</b>
</div>
<div id="divMsg1" style="display:none">
<b>Events</b>
</div>
</div>

How to solve this when clicking on second button to hide content from the first button. Thanks, all

Answer 1

You could do with toggle the class based on clicked element

 function showHideDiv(ele) { var srcElement = document.getElementById(ele); document.querySelectorAll('.box').forEach(a => a.classList.add('hide')) if (srcElement != null) { srcElement.classList.toggle('hide') } }

 .hide { display: none; }

 <div class="listsearch-header fl-wrap"> <h3> <a class="button-one" onClick="showHideDiv('divMsg')" title="Relevant Title" href="#">Places</a> <a class="button-two" onClick="showHideDiv('divMsg1')" title="Relevant Title" href="#">Events</a> </h3> <div id="divMsg" class="box hide"> <b>Places</b> </div> <div id="divMsg1" class="box hide"> <b>Events</b> </div> </div>

Answer 2

You could use a generic function which takes the actual elements to be shown or hidden as input parameters.

 function showHideDiv(show, hide) { document.getElementById(show).style.display = "block"; document.getElementById(hide).style.display = "none"; }

 <div class="listsearch-header fl-wrap"> <h3> <a class="button-one" onClick="showHideDiv('divMsg','divMsg1')" title="Relevant Title" href="#">Places</a> <a class="button-two" onClick="showHideDiv('divMsg1','divMsg')" title="Relevant Title" href="#">Events</a> </h3> <div id="divMsg" style=" display:none"> <b>Places</b> </div> <div id="divMsg1" style="display:none"> <b>Events</b> </div> </div>