BootStrap Collapsible Menu

Hello, I am having an issue with a Bootstrap button. I have implemented the "collapse" feature in a menu, and when I click on one button to collapse it, everything works fine.

However, when I try to collapse another button while one is active, it pushes the active one down instead of hiding it. How can I change this behavior?

Here is the code snippet for reference:

<ul class="nav nav-pills">
   <li class="dropdown"><a href="#" data-toggle="collapse" data-target="#content0a">1<strong class="caret"></strong></a></li>
   <li class="dropdown"><a href="#" data-toggle="collapse" data-target="#content1a">2<strong class="caret"></strong></a></li>
</ul>
<div class="clearfix"><p>content more</p></div>
<div id="content0a" class="collapse">
<div class="navbar">
    <div class="thumbnail bs-example bullet0a">
        <div class="media">
            <div class="">
                <ul><li> Content...1 </li></ul>
            </div>
        </div>
    </div>
</div>
</div>
<div id="content1a" class="collapse">
<div class="navbar">
    <div class="thumbnail bs-example bullet0a">
        <div class="media">
            <div class="">
                <ul><li> Content...2 </li></ul>
            </div>
        </div>
    </div>
</div>
</div>
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Give this a shot.

   <script>
       $(document).ready(function(){
           $('.nav-pills a').click(function(){
               $('.in').not($(this).data('target')).height(0);
               $('.in').not($(this).data('target')).removeClass('in');
           });
       });
   </script>

You might also want to test out this alternative method for a collapse animation:

<script>
    $(document).ready(function(){
        $('.nav-pills a').click(function(){
            $('.in').not($(this).data('target')).collapse('hide');
        });
    });
</script>

You can include this either at the end of your webpage just before the </body> tag or integrate it into your current JavaScript file.

Try it out and inform me if it meets your requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Eliminate item from array if it is found in JSON data

I have implemented a script to eliminate JSON objects from an array that exist in both the array itself and another JSON object: var stageChildren = stage.sprites; for (var i = 0; i < stageChildren.length; i++) { for (var x in mainMenu) { if ...

javascriptarraysjsonobject

Tips for changing the style of a class in Salesforce on Trailhead

I'm experiencing some difficulties when attempting to add style to a specific class in Trailhead Salesforce. I have tried various methods listed below, but none of them seem to be working: document.body.style.setWidth = 100%; document.getElementsByCla ...

javascripthtmlcsssalesforce-lightning

Ways to align a flex child in the middle depending on the width of the

I'm currently working on centering the navigation menu horizontally by aligning it with the width of the header tags using tailwind CSS. However, I've run into an issue where it only centers based on the navigation tags' width. <!DOCTYPE ...

htmlcsstailwind-css

Tips for applying unique CSS classes to individual templates in Joomla

I manage a website at www.kadamjay.kg using an RT template system where each language version has its own unique template. However, when I add a class to a specific element, it only changes on one template and there are no additional templates in the pat ...

cssclasstemplatesjoomla

Tips for correctly mapping a shuffled array in React/Next without triggering a hydration mismatch error

I've been working on a Next.js website and I'm trying to display a randomized list of famous quotes. To achieve this, I'm using lodash to shuffle the array of quotes and then mapping them onto the page. import { useMemo } from 'react&ap ...

javascriptreactjsnext.js

Unlocking the Potential of Larger jQuery Icons

In a recent announcement, the jQuery team unveiled new icons for their UI components. However, I have been unable to locate any examples of how to use them or where they can be downloaded from. Also, it appears that the themes in the ThemeRoller only provi ...

jquerycssjquery-ui

Can you explain the contrast between using require('d3') and require('d3-selection')?

While working on a nodejs application with javascript, I encountered an interesting issue. In my code, I am passing a d3 selection to a function as shown below. // mymodule.js exports.myfunc = function(ele){ if(ele instanceof d3.selection){ // do so ...

javascriptnode.jsd3.js

Display a collection of objects using Jade / Pug syntax

Struggling to find resources on Pug / Jade templating, turning to this platform for help. I've been diving into documentation on iterations along with consulting this helpful link. Working with Node.js, Express, and pug for a school project - a mock ...

javascriptnode.jsexpresspug

Assign false to all properties in the nested object with the exception of one

In order to manage the open/close state of my panel, I am using setState similar to the method described in this post. My goal is to only allow one panel to be open at a time, meaning there will be only one true value in the state. Here is the snippet of ...

javascriptreactjsreact-hooksantd

What could be the reason for my image displaying when I manually input the src URL, but not when I set it through code?

While working on a practice React app, I encountered an issue with displaying an image from Firebase Storage on the website. Even though the image URL is correctly assigned to "src", the image does not appear on the site. Strangely, when I manually paste t ...

javascriptreactjsfirebaseecmascript-6firebase-storage

When transferring information from the UI controller to Javascript, there is a risk of losing certain data points in the process

My UI controller is returning data with two objects of the same type, each representing a certain entity. Both objects have values assigned to them, as shown when fully expanded. https://i.sstatic.net/Txhwh.png However, when inspecting the JavaScript, th ...

javascriptc#asp.net.netjson

Unexpected behavior with Angular's Async Validator

I am struggling to get my custom asynchronous validator to work in Angular. Despite no errors showing up in the console, the validator shouldBeUnique isn't functioning as expected while the non-asynchronous custom validator cannotContainSpace works pe ...

javascriptangularangular5

JavaScript-generated HTML can benefit immensely from the power of Ajax

My JavaScript code generates HTML to display a list of items, and I want to make a jQuery Ajax call for each item. However, it seems that the Ajax calls are not being triggered because they are not part of the initial page's HTML content. Additionally ...

javascriptjquerydjangoajax

Commitment and the worth of pointing

I am trying to create a promise chain in Angular to execute a series of queries: for(variableIndex in _editableVariable.values) { var v = _editableVariable.values[variableIndex]; if(v.value != v.old_value) { ...

javascriptangularjspromise

Is there a way to modify an element in an array in AngularJS without using splice?

I encountered a situation similar to the one described in this post here, where I not only want to retrieve an element but also change its name value. I came across a method that involves using splice: dataList.splice(index, 1); dataList.splice(index, 0, ...

javascriptarraysjsonangularjs

Populate a form with database information to pre-fill the fields

So I have this web form built with HTML, and there are certain values within the form that can be changed by the user. To ensure these changes are saved, I'm storing them in a database. My goal is to have the form automatically filled with the data fr ...

phpjavascriptjqueryhtmlajax

Facing an issue with Django where the jQuery datatables seem to be endlessly stuck on

As a newcomer to Django, I am facing an issue while trying to load a jQuery datatables with data received from the server. The JSON format of the data is correct, but I encountered a problem where the table does not populate and I get an error in the Fireb ...

jqueryjsondjangodatatables

javascript - substitute the dash (hyphen) with a blank space

For quite some time now, I've been on the lookout for a solution that can transform a dash (hyphen) into a space. Surprisingly, despite finding numerous responses for changing a space into a dash, there seems to be a scarcity of information going in t ...

javascriptregex

Interactions between a service and a directive: interdependence or triggering of events

Issue: managing multiple directives that interact with a service or factory to communicate and log actions with a server. Should I establish dependencies between them? angular.module('someModule', []) .directive('someDir', ['l ...

javascriptangularjsmoduleangularjs-directive

Tips on creating a POST request in ReactJS

Hey there! I'm a student developer working with ReactJS and currently learning how to code using the Reactjs Context API. I've encountered an issue when trying to send data from my form for categories, resulting in the following error: Unhandl ...

javascriptreactjs