Todd Gilbey Todd Gilbey - 1 month ago 14
CSS Question

Bootstrap "data-toggle" accordion suddenlystops working

I have a code set up which toggles a

div
to slide into view in the accordion fashion. It works for a while, and then it doesn't slide back in after a while.

Here is the code including all the files in the head section. Any ideas?



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<button class="search-dropdown-div-click"><a href="#search-dropdown-div" class="btn btn-info" data-toggle="collapse"><i class="fa fa-search" aria-hidden="true"></i></a></button>
<div class="search-bar-collapse collapse" id="search-dropdown-div">
<div id="search-center">
<form>
<input class="fontAwesome" type="search" placeholder="&#xf238; Type your question here"/>
<input class="fontAwesome" type="submit" value="Search" name="search-website-button"/>
</form>
</div>
</div>




Answer

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

    <button class="search-dropdown-div-click"><a data-target="#search-dropdown-div" class="btn btn-info BtnCollapse" data-toggle="collapse">
        <i class="fa fa-search" aria-hidden="true"></i></a>
    </button>
    <div class="search-bar-collapse" id="search-dropdown-div">
        <div id="search-center">
            <form>
                <input class="fontAwesome" type="search" placeholder="&#xf238; Type your question here"/>
                <input class="fontAwesome" type="submit" value="Search" name="search-website-button"/>
            </form>
        </div>
    </div>
</body>
<script type="text/javascript">
    $(document).on("click",".search-dropdown-div-click",function(){
        $("#search-dropdown-div").slideToggle();
    });
</script>
</html>

Just use data-target="#search-dropdown-div" instead of href="#search-dropdown-div"

Here is the HTML

    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>

        <button class="search-dropdown-div-click"><a data-target="#search-dropdown-div" class="btn btn-info BtnCollapse" data-toggle="collapse">
            <i class="fa fa-search" aria-hidden="true"></i></a>
        </button>
        <div class="search-bar-collapse" id="search-dropdown-div">
            <div id="search-center">
                <form>
                    <input class="fontAwesome" type="search" placeholder="&#xf238; Type your question here"/>
                    <input class="fontAwesome" type="submit" value="Search" name="search-website-button"/>
                </form>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $(document).on("click",".search-dropdown-div-click",function(){
            $("#search-dropdown-div").slideToggle();
        });
    </script>
</html>