如何实现不带按钮的Show Hide JavaScript

Question

I have a doubt as to show and hide I'm using bootstrap but I can not understand how to use the show and hide, what I try is that when the name is selected show only that panel while the other panels are kept hidden and when you close the panel the other panels that were hidden are displayed again, and when you select another panel than the first hide for others only show that open panel

Here the code:

<div class="container">
<h2>Our Attorneys</h2>
<div class="panel-group">
    <div class="panel panel-default" id="drop1">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" href="#collapse1">Ricardo Aguirre M.</a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse">
            <ul class="list-group">
                <li class="list-group-item" style="color: black;">
                    <p>
                        text
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel panel-default" id="drop2">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" href="#collapse2">Abel Chávez S.</a>
            </h4>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
            <ul class="list-group">
                <li class="list-group-item" style="color: black;">
                    <p>
                        text
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel panel-default" id="drop3">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" href="#collapse3">Angelly Wendy González F.</a>
            </h4>
        </div>
        <div id="collapse3" class="panel-collapse collapse" style="color: black;">
            <ul class="list-group">
                <li class="list-group-item">
                    <p>
                     text
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel panel-default" id="drop4">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" href="#collapse4">Erick Garcia C.</a>
            </h4>
        </div>
        <div id="collapse4" class="panel-collapse collapse" style="color: black;">
            <ul class="list-group">
                <li class="list-group-item">
                    <p>
                        text
                    </p>
                </li>
            </ul>
        </div>
    </div>
    <div class="panel panel-default" id="drop5">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" href="#collapse5">María Guadalupe Vargas A.</a>
            </h4>
        </div>
        <div id="collapse5" class="panel-collapse collapse" style="color: black;">
            <ul class="list-group">
                <li class="list-group-item">
                    <p>
                        <p>
                           text
                        </p>
                    </p>
                </li>
            </ul>
            <%--<div class="panel-footer">Footer</div>--%>
        </div>
    </div>
</div>

and the area:

<script>
$(document).ready(function(){
    $("#drop1").click(function () {
        $("drop2").hide();
        $("drop3").hide();
        $("drop4").hide();
        $("drop5").hide();
    },
    function () {
        $("drop2").show();
        $("drop3").show();
        $("drop4").show();
        $("drop5").show();
    });

    $("#drop2").click(function () {
        $("drop3").hide();
        $("drop4").hide();
        $("drop5").hide();
        $("drop1").hide();
    },
    function () {
        $("drop3").show();
        $("drop4").show();
        $("drop5").show();
        $("drop1").show();
    });
    $("#drop3").click(function () {
        $("drop1").hide();
        $("drop2").hide();
        $("drop4").hide();
        $("drop5").hide();
    },
    function () {
        $("drop1").show();
        $("drop2").show();
        $("drop4").show();
        $("drop5").show();
    });
    $("#drop4").click(function () {
        $("drop2").hide();
        $("drop3").hide();
        $("drop1").hide();
        $("drop5").hide();
    },
    function () {
        $("drop2").show();
        $("drop3").show();
        $("drop1").show();
        $("drop5").show();
    });
    $("#drop5").click(function () {
        $("drop2").hide();
        $("drop3").hide();
        $("drop4").hide();
        $("drop1").hide();
    },
    function () {
        $("drop2").show();
        $("drop3").show();
        $("drop4").show();
        $("drop1").show();
    });
});
</script>

i'm very confused.

Answer 1

If I understand you correctly when you click one name/panel you want to toggle the visibility of the other panels/names and then show/hide based on clicking that.

If that is the desire then simply use the classes with this:

$(document).ready(function() {
  $('.panel-group').on('click', '.panel', function() {
    $(this).siblings().toggle();
  });
});

Answer 2

just load the bootstrap and jquery , there is no need to hide or show with javascript

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Accordion Example</h2> <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a> </h4> </div> <div id="collapse1" class="panel-collapse collapse in"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a> </h4> </div> <div id="collapse2" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a> </h4> </div> <div id="collapse3" class="panel-collapse collapse"> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> </div> </div> </div> </body> </html>