CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap-3
Christopher Joseph
Christopher Joseph

Reputation: 1

Bootstrap 3 Collapse Menus

I have been having an issue with a website I have been developing. I am a beginner with javascript so sorry in advance for a dumb question. On the websites www.dynamitecoffeeco.com I have two different things each in their own container. When you click on the menu button, and then click on the search button, I would like one to close out and then the other open. I have tried using other solutions but they all are tailored to the accordion markup. Any and all help would be appreciated. And here is the code as well.

The nav collapse is the container holding the menu and the search collapse is holding the search bar. Thanks again. 

<div id="nav-collapse" class="collapse">
    <div class="wrapper">
        <div class="row">
            <?php wp_nav_menu(); ?>
        </div>
    </div>
</div>
<div id="search-collapse" class="collapse">
    <div class="wrapper">
        <div class="row">
            <form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
                <label>
                    <input type="search" width="100%" class="search-field" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" title="<?php echo esc_attr_x( 'Search for:', 'label' ) ?>" />
                </label>
            </form>
        </div>
    </div>
</div>

Upvotes: 0

Views: 116

Answers (1)

scooterlord
scooterlord

Reputation: 15379

Ok it took me some time to understand the problem but here goes.

First of all you have to put the class 'in' in your 'default' opened menu, probably #nav-collapse:

<div id="nav-collapse" class="collapse in">

Now in the link that opens the search button you should write:

<a data-toggle="collapse" href="#search-collapse">

in the link that goes back to the navigation menu use this code:

<a data-toggle="collapse" href="#nav-collapse">

This assumes you have properly loaded jquery/bootstrap.js/bootstrap.css

Upvotes: 1

Related Questions