Utilize Bootstrap to switch between 'collapse' and 'collapse in' depending on the device being used

I have a collapsible panel set to default "expand" (collapse in) and it is working well. However, I would like to make it "collapse" (shrink) for mobile and tablet devices. Is there any built-in feature in Bootstrap that can help me achieve this?

<div class="container hero-spacer">
  <div class="row">
  <div class="col-md-12">
  <div class="panel panel-primary">
            <div class="panel-heading">
                <h4 class="panel-title fontboldx">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><span class="glyphicon glyphicon-collapse-down"></span> Information</a>
                </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <p>Details will be displayed here.</p>
                </div>
            </div>
        </div>

For mobile and tablet devices, I would like the output to look like the image shown below.

jqueryhtmlcsstwitter-bootstrap-3

Answer №1

After some experimentation, I have discovered a solution using basic JavaScript. Here is the code snippet:

To implement this functionality, insert the following code after creating the necessary objects (preferably before closing the </body> tag):

<script>
if ((screen.width>=1024) && (screen.height>=768)) {
 var x = document.getElementById("collapseOne");
 x.className = "panel-collapse collapse in"; 
}
else {
var x = document.getElementById("collapseOne");
 x.className = "panel-collapse collapse"; 
}
</script>

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

Angular JS: Text with multiple lines and various links

Looking for assistance with integrating multi-line text display in AngularJS? You want to limit the text to 225 characters, add a "view more" hyperlink, and a "less" link to hide extra text. While you've attempted it using jQuery, you're seeking ...

jqueryangularjsmultiline

Creating a vertical scrolling marquee to showcase a list in React - step by step guide

Trying to create a marquee effect that displays a list of items in a vertical auto-scroll. After reaching the end of the list, I want it to loop back to the beginning seamlessly for continuous animation. The code snippet below shows my progress so far - a ...

htmlcssreactjsfrontendmarquee

Tips on dividing a string into an array in jQuery using randomization

Here's the scenario: let text = 'apple, banana, cherry'; let wordsArray = text.split(', '); Currently, the above code splits the string into an array of words. But I'm wondering if there's a method to shuffle the words ...

jqueryarrayssplit

The boundary for the multipart/form-data in the $http post request is missing

I noticed that the boundary I set for the post call appears different in Chrome. How can I make my custom boundary "--test" display correctly on the request payload? var url = '/site/apkUpload'; var deferred = $q.defer(); console.log ...

angularjsnode.jshtmlhttp

Picking out an element following the application of children()

My query jQuery('.pa_availability-pin table tbody tr').children('td').eq(1); fetches a <td> element now I'm trying to target the <input> tag within this selected <td> Any suggestions on how to accomplish this in ...

jqueryjquery-selectors

Assign the value from the list to a variable in order to execute an API call

Imagine a scenario where there's a button that displays a random joke based on a specific category. The categories are fetched using an API request from https://api.chucknorris.io/jokes/categories The jokes are generated from https://api.chucknorris. ...

javascripthtmlapi

Number Stepper Reverse

Could the HTML5 number stepper be reversed so that pushing down increases the number and vice versa? In Response to any 'Why?' inquiries: Consider batting order in sports like cricket or baseball. As you move down the order, your batting positio ...

htmlinput

What is the best way to convert a string to an integer in JavaScript while still maintaining compatibility with Internet Explorer 11?

Here is the code snippet that I am working with: setCol (param) { // missing forEach on NodeList for IE11 if (window.NodeList && !NodeList.prototype.forEach) { NodeList.prototype.forEach = Array.prototype.forEach; } const a ...

javascriptjqueryvue.jsinternet-explorerparseint

Display the HTML element prior to initiating the synchronous AJAX request

I'm looking to display a <div> upon clicking submit before triggering $.ajax() Here's my HTML: <div id="waiting_div"></div> This is the CSS: #waiting_div { position: fixed; top: 0px; left: 0px; height: 100%; ...

javascriptjqueryhtmlcssajax

Incorrect rendering of the <li> tag

I've been working on creating a simple web "to do list" but I've encountered an issue. When I manually add todos and click on them, the 'text-decoration: line-through;' property is ignored, and I can't see the strikethrough effect ...

javascriptjqueryhtmlcss

How to retrieve the context of a .js file using jQuery $.ajax without automatically executing upon receipt

Upon fetching a *.js file using $.ajax, the scripts are executed upon receipt! Is there a way to fetch and execute it only when desired? Moreover, is there a method to remove these scripts at will? ...

javascriptjqueryajax

Switch the orientation of the unordered list from horizontal to vertical in a dynamic way

Perhaps a repeated inquiry, yet I have been unable to discover a solution for this issue... I am dealing with a div element (referred to as master) that I do not have the ability to adjust in terms of width or height. Contained within the master is anoth ...

htmlcssflexbox

How to dynamically update the value of a TextBoxFor in asp.net MVC when a text box value changes

I need some assistance with a specific topic. In my scenario, I have two textboxes on my view. I want the value generated in my controller to be applied to textbox2 when there is a change in textbox1. For instance, if I enter a username in textbox1, textb ...

javascripthtmlasp.netajaxasp.net-mvc

Get a webpage that generates a POST parameter through JavaScript and save it onto your device

After extensive research, I have hit a roadblock and desperately need help. My task involves downloading an HTML page by filling out a form with various data and submitting it to save the responses. Using Firebug, I can see that my data is sent over POST, ...

javascriptjqueryhtmlwget

The challenge of navigating CSS specificity guidelines

In my CSS file, I have defined two styles for a table with the class "myTable". The first style sets the background color of header cells to gray, while the second style sets the background color of odd rows to blue: .myTable th { background-color: gr ...

css

Parallax not functioning properly due to CSS before and after elements

I am attempting to use before and after pseudo-elements for a parallax effect on my div element <div id="OurPhilosophy" class="parallax-window" data-parallax="scroll" data-image-src="https://cdn6.bigcommerce.com/s-jhmi7y5v2c/product_images/uploaded_ima ...

htmlcss

Tips for connecting an input tag within a popover to a Vue Model

I've got an input nested inside a popover content as shown below: JSFiddle Link HTML code snippet: <div id="vue-app"> <div class="btn btn-primary" data-toggle="popover" data-placement="bottom" title="Hello World!" data-html="true" data ...

javascriptjquerytwitter-bootstrapvue.jsvuejs2

Choose a division of an element within an embedded frame

Two different pages on the same website, Home.html and Page2.html. Home.html contains the following code: <html> <iframe id="one" src="page2.html" style="display:none"></iframe> <div id="container"> <h1& ...

javascriptjqueryhtmliframeinnerhtml

Transfer the value of a variable within the local scope to the dragstart event handler during the dynamic generation of an input element

After going through several similar questions, I couldn't find a solution that applies to my specific case. Here is the loop I am working with: $.each(data.modules, function(i, field) { let $li = $(`<li><div> Name: ${field.name}</div& ...

javascriptjquery

Tips for preventing the line through effect on a span element when it is checked

I am working on a project that involves a list of items labeled as li. For example: <ul class="list"> <li class="checked">Groceries <span>&#215;</span></li> <li>Medicine <span>& ...

htmlcssresponsive-design