Adjust the size of a collapsed element in a bootstrap accordion panel

I am working with a classic bootstrap accordion in my code. I want to adjust the width of the expanded ul/li elements when a h5 element is clicked (decrease width). Currently, the width expands fully when the h5 element is clicked. Can anyone provide assistance with this?

<div class="panel-group" id="accordion">

                <div class="panel" >
                    <a data-toggle="collapse" data-parent="#accordion" href="#divListCiagniki">
                        <h5>ciągniki</h5>
                    </a>
                    <div id="divListCiagniki" class="panel-collapse collapse" style="width:50%">

                            <ul class="panel-body" >
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                            </ul>

                    </div>
                </div>

                <div class="panel">
                    <a data-toggle="collapse" data-parent="#accordion" href="#divListMaszynyRolnicze">
                        <h5>maszyny rolnicze</h5>
                    </a>
                    <div id="divListMaszynyRolnicze" class="panel-collapse collapse ">
                        <div class="panel-body">
                            <ul>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                                <li>example</li>
                            </ul>
                        </div>
                    </div>
                </div>

Answer №1

When you find yourself wanting to reduce the width of your ul/li tags, try this:

<div id="listTractors" class="panel-collapse collapse" style="width:<Desired width>; overflow:hidden;">

//By using overflow: hidden, any text that surpasses the specified width will be concealed.

Answer №2

For optimal results, consider implementing the following code snippet:

li:active { 
    width: 80% !important;
}

Ensure to include !important when overriding Bootstrap styles.

Answer №3

I attempted to modify the width of either div id: divListCiagniki or divListMaszynyRolnicze, but unfortunately, neither method was successful.

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

Transmit form information using jQuery's ajax JSON functionality

Hello, I am new to PHP/jquery and I have a question. I would like to know how to send JSON data from a form field (such as name, age, etc.) using AJAX in a JSON format. I have searched for relevant information on this but couldn't find anything concre ...

Is there a way for me to retrieve the list values sent back by the controller through ajax?

How do I access values in a list returned from my controller using AJAX? I keep getting undefined when trying to display an alert. Controller @ResponseBody @RequestMapping(value="/practice/{category}/option", method = RequestMethod.POST, produces = "appl ...

HTML/ModX styling for selected textboxes

I am looking to enhance the style of my search-box, which is similar to the one on THIS website. While I have tried using :active, the effect only lasts for a brief moment. Currently, my code is heavily influenced by modX terms, but I will still share it h ...

How to iterate dynamically over arrays using JavaScript

I am working on a JavaScript project where I need to create a graph with 25 different data points. While my current JavaScript method is effective, I am facing an issue - I have multiple arrays and I am looking for a solution that allows me to use a for lo ...

Reply after performing several asynchronous queries using mongoose and express

When trying to create a list of products to send to a client, I am encountering an issue where res.send executes before the loop has completed. I have tried using async/await but it doesn't seem to work. Any suggestions on how to resolve this? Below ...

Encountering a type mismatch error in Typescript while working with Redux state in a store file

It appears that I have correctly identified all the types, but could there be a different type of Reducer missing? 'IinitialAssetsState' is not assignable to type 'Reducer' The complete error message: Type '(state: { assets: n ...

Is the meta viewport exclusively meant for mobile phones?

Is it possible to configure the general responsive meta viewport setting specifically for phones? Our website appears fine on 7" and larger tablets in both portrait and landscape modes without the meta tag, but it is a bit inconvenient on smaller devices. ...

Adjust the size of the FabricJS canvas within a child component in VueJS

In my project, I am using VueJS and FabricJS to create a dynamic canvas that changes size based on user input. The goal is to have the canvas adjust its dimensions as soon as the user enters new values in the sidebar component. Despite using $emit from ch ...

What is causing the fs.readFile function to give back undefined instead of the expected result?

/** * A function to determine the cost of an employee from a specific data file * @param {string} filePath - the path to the employee data file * @returns {{name: string, cost: number}} - the name and cost of the employee */ function calculateEmployee ...

Enhancing Navbar Design with Tailwind CSS in NextJS and React

I have not worked with React in a while and just started learning Next.Js. I am trying to figure out how to change the background of my Navbar using Tailwind CSS based on a boolean value "current" (true/false) depending on which page the user is on with Ne ...

Names changes and deletion of files that have been uploaded- Using Vue.js

I attempted to use v-model in order to rename files before uploading them to the system, but unfortunately, it was not successful. As a result, I developed an alternative solution which is functioning perfectly, except for the fact that I am unable to reta ...

Unable to execute a basic opacity transition on a div element

Why isn't the opacity transitioning in Chrome? I only want it to fade in with the 'transitions' class without fading out first. Check out this code sample: http://jsfiddle.net/chovy/t37k3/9/ <div></div> <a href="#" class="s ...

CSS Element Overlapping Issue in Safari Browser

I am currently developing an audio player for my application that includes a pause/play button, next button, and back button. I have encountered a problem specifically on Safari where the back/pause buttons are overlapping each other. The play/pause button ...

A guide to playing a series of audio files in succession using the Ionic Media plugin

I have been attempting to create a playlist of multiple audio files using the Ionic media plugin from here. However, I am struggling to achieve this without resorting to using a timeout function. Here is my current approach: playOne(track: AudioFile): Pr ...

The javascript file does not load and stringByEvaluatingJavaScriptFromString is also not running?

In my application, I am downloading an HTML file from the server and displaying it in a uiwebview. NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES); NSString *documentsDirectory = [paths firstObject]; NSStri ...

What is the most efficient way to access a cell within an HTML table using jQuery or the Document Object Model (

I have an unchangeable HTML table styled with CSS. My goal is to extract the value from the first column for filtering purposes. I've been struggling to locate a suitable jQuery or DOM function to accomplish this task. Unable to find a way to access ...

Encountering a 404 error for core.js and browser.js while loading an Angular 2 app through system.src.js

I am new to Angular2 and have followed the Angular2 quickstart and tutorial to get started. Just to provide some context, when a user clicks on a link in the top navigation bar of my webapp, it triggers a server side request. The resulting page returned t ...

I'm attempting to retrieve external XML data and showcase it on my HTML page

My goal is to extract any xml tag from the provided sample. However, I am facing an issue with Internet Explorer where I can only retrieve data from the first record. What kind of javascript code should I implement to resolve this problem? <html> ...

Error: Failed to Locate WebMethod Ajax Call

I am in the process of developing a web form that will trigger an email notification upon submission. I have written a webmethod and attempting to use ajax for posting. However, I am encountering a 404 error when I try to submit the form. Below is the co ...

How to convert table headings in Bootstrap-Vue.js

For a few nights now, I've been struggling to translate the table header in my vue.js component. It seems like I'm missing something as I'm new to Vue.js and can't seem to figure out what's wrong. Translating within the HTML works ...