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

Issues surrounding the determination of CSS attribute value using .css() function within a variable

I have been working on a function to change the color of a span dynamically from black to a randomly selected color from a predefined list. However, I am encountering an issue with the .css("color", variableName) part of my code and suspect that my synta ...

javascriptjquerycss

jQuery selector for attributes with values that are higher than a specific amount using the ">" symbol or lower than a certain value using the "<" symbol

I currently have several div elements with the following structure: <div class="roomnamecta" data-price="1189" data-adult="3">Room 1</div> <div class="roomnamecta" data-price="578" data-adult ...

javascriptjqueryjquery-selectors

Is there an issue with the functionality of the number input type in HTML 5?

<form name="form" method="get" action="" > Number : <input type="number" name="num" id="num" min="1" max="5" required="required"/> <br/> Email : <input type="email" name="email" id="email" required="required"/> <br /> <in ...

html

When you open the responsive navigation bar, it automatically closes

After creating a website some time ago, I decided to make it responsive by adding a menu. However, I encountered an issue where the menu bar opens but immediately closes after showing the entire list. Here is the HTML code for the menu: <!-- start men ...

jqueryhtmlcssresponsive-designnavigation

What steps should I follow to ensure that the content for the back page is printed on the back page of a booklet when using paged.js?

In the case of a booklet printed from folded sheets, it is interesting to note that the number on the back page will always be divisible by 4. If the content does not have a multiple of 4 pages, then the back page will end up inside the booklet. For my cu ...

javascripthtmlcss

Tips for including descriptions on individual images within the jQuery PhotoStack gallery

Recently, I encountered a challenge. I am currently utilizing a PHP file for accessing images stored in a specific folder. Here is the snippet of my PHP code: <?php $location = 'albums'; $album_name = $_GET['album_name']; $files ...

phpjavascriptjqueryajaxphotos

Implementing a jQuery UI multi-date picker for selecting date ranges excluding weekends

I am currently utilizing a multidate picker, which can be found here. I am seeking to implement a date range mode where weekends are not selectable. Previously, I have successfully set up the multidatepicker to block weekends and allow users to select onl ...

jqueryjquery-uidaterangejquery-ui-datepicker

Lighthouse Issue: Facing PWA Challenges with a "Request Blocked by DevTools" Error

For hours now, I've been struggling to make Lighthouse work in Chrome for my initial PWA project. I feel completely lost as nothing seems to be making sense despite the basic code I have included below. The issue arises when I load the page normally ...

javascripthtmlgoogle-chromeprogressive-web-appslighthouse

How to vertically align radio buttons with varying label lengths using Angular and Bootstrap 4?

Is there a way to properly align radio buttons with variable length labels? When each label has a different length, the radio buttons appear misaligned. How can this be fixed? <div class="row"> <div class="form-check form-check-inline" *ngFor="l ...

htmlangularbootstrap-4

What is the best way to prevent Firefox from storing the data of a textarea in the local environment?

I have been developing a website locally, and I have noticed that there are numerous <textarea> elements present on the site. One issue I am facing is that whenever I reload the site, the content within the <textarea> remains the same. This pe ...

javascripthtmlfirefoxcaching

`html2canvas encountered an issue: Unable to locate a logger instance`

When I use html2canvas to render the same content repeatedly, I encounter an error about 5% of the time. It seems to be sporadic and I'm not sure why it occurs. What could be causing this unpredictable behavior? html2canvas.js:2396 Uncaught (in promi ...

javascripthtmlhtml2canvas

I need to locate a div element with the class name of "dhx_cal_light" and adjust its height style to 460px

Is there a way to locate a div element with the class "dhx_cal_light" and modify its height to 460px? Here is the HTML snippet: <div class="dhx_cal_light" style="visibility: visible; height: 511px; display: block; top: 80px; left: 633px;"> This is ...

jquery

Having trouble getting jQuery click event to work with Express for loading a Handlebars page

My jQuery on click function is not working properly in conjunction with Express to route to a handlebars page and display the passed information. I have attempted different solutions such as changing the HTTP method from GET to POST, not using handlebars ...

javascriptjqueryexpresshandlebars.js

Is there a way to customize the background color of the active list item class in Bootstrap 4?

Customizing Boostrap Code : <!-- Custom Sidebar --> <div class="bg-light border-right" id="sidebar-wrapper"> <div class="sidebar-heading"><strong><?= __('Admin Panel') ?></strong></div> <div class="li ...

css

One way to determine whether .ajax is using Get or POST is to check the type parameter

I have a query: $.ajax({ url: "http://twitter.com/status/user_timeline/treason.json?count=10&callback=?", success: function (data, textStatus, jqXHR) { }, error: function (jqXHR, textStatus, errorThrown ...

javascriptjqueryajax

Utilize jQuery to convert text to lowercase before adding Capitalize CSS styling

I have encountered a situation where I need to change the HTML link values from UPPERCASE to LOWERCASE and then apply a capitalization style. The problem lies in the fact that the links arrive in uppercase, so I had to come up with a workaround: The given ...

javascriptjqueryhtmlcss

"Using jQuery, the process of obtaining the column index when the mouse is clicked on a specific

<table> <tr class="csstablelisttd"> <td> </td> <td> 15 </td> </tr> <tr class="csstablelisttd"> <td> </td> <td> 30 </td> </tr> < ...

jquery

ways to access a designated nodal point in angularJS from a constantly updating data source

I am in need of assistance with how to open a specific node using angularJS from a dynamic data source. I have been able to toggle (hide/show) the sub nodes, but what I would like is for clicking on a specific node to only show its sub-nodes. Currently, wh ...

htmlangularjs

Using Ajax to create a loading animation

I want to display an ajax-loader.gif while my data is loading, and then hide it once the data has been completely loaded. Here is the code snippet for update: $.ajax({ type: "POST", dataType: 'json', url: "api/Employee/GetData", beforeSend: fu ...

jqueryajax

Using Selenium with C# to input text into an HTML <input> tag is not functioning properly

I need help figuring out how to fill in an input field on a website using HTML. Here is what the section of the website () looks like: <div class="flex-item-fluid"> <input autocomplete="username" autocapitalize="off" ...

c#htmlseleniumautomation