Initially, the div remains hidden despite applying the 'collapse in' class to it

When looking at the code below, I noticed that the division #content1 is initially collapsed even after applying the "collapse in" class. How can I display the content of Column1 from the start without utilizing any JavaScript functions? 

  <!DOCTYPE HTML>
        <html>
        <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        </head>
        <body>
        
        <div class="container">
        <div class="row">
        <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12">
        <h1> <a href="#content1" data-toggle="collapse"> Column1 </a></h1> 
        <div id="content1" class="collapse in">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
        </div>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-8 col-xs-12">
        <a href="#content2" data-toggle="collapse"><h1> Column2 </h1> </a>
        <div id="content2" class="collapse">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
        
        </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
        <a href="#content3" data-toggle="collapse"><h1> Column3 </h1> </a>
        <div class="collapse" id="content3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
        </div>
        </div>
        </div>
        </div>
        
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
        </body>
        </html>

cssbootstrap-4

Answer №1

.in was originally utilized in Bootstrap 3 (https://getbootstrap.com/docs/3.3/javascript/#collapse). However, in Bootstrap 4, it has been replaced with .show ().

In order to update your code correctly, you must add the class .show to the respective div tag:

<!DOCTYPE HTML>
    <html>
        <head>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
        </head>
        <body>

        <div class="container">
            <div class="row">
                <div class="col-lg-2 col-md-2 col-sm-4 col-xs-12">
                    <h1> <a href="#content1" data-toggle="collapse"> Column1 </a></h1> 
                    <div id="content1" class="collapse in **show**">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-8 col-xs-12">
                    <a href="#content2" data-toggle="collapse"><h1> Column2 </h1> </a>
                    <div id="content2" class="collapse">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.

                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
                    <a href="#content3" data-toggle="collapse"><h1> Column3 </h1> </a>
                    <div class="collapse" id="content3">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada iaculis hendrerit. Integer volutpat turpis id dui imperdiet fermentum. Vestibulum id augue diam. Donec efficitur sagittis ex eget malesuada. In elementum eu odio id viverra. Vivamus massa odio, scelerisque pharetra orci et, dignissim ullamcorper justo. Quisque id pretium purus, eget iaculis purus.
                    </div>
                </div>
            </div>
        </div>;

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

Tips on attaining the desired CSS impact

I'm curious about the method used by the creators of carv.ai to achieve the text masking effect seen on the paragraph "Carv connects wirelessly ...". I'm aware of how background images can be masked on text. ...

javascriptjquerycssweb

What are some ways to expand the width of a MaterialUI form control if no value has been chosen?

I am currently working on a project where I need a dropdown menu component with specific selections. However, the layout appears to be cramped and I'm struggling to adjust the width. Additionally, I've been unsuccessful in changing the font size ...

htmlcssreactjstypescriptmaterial-ui

Display items inside containers using angularjs ng repeat and bootstrap styles, however, the layout is not being rendered correctly

I am struggling to display products in boxes on my ecommerce website, similar to how they appear on other platforms. Although I am utilizing AngularJS ng-repeat and bootstrap classes, the layout of the products is not coming out as intended. Take a look ...

cssangularjsbootstrap-ui

Showcasing top performers via JavaScript tabs

I have two tabs on my webpage: "Overall Leaderboard" and "Weekly Leaderboard". Each tab displays a leaderboard with different scores. When I click on the "Overall Leaderboard" tab, it shows a leaderboard with specific scores. Now, my question is how can ...

javascriptjqueryhtmlcss

Transmitting form data inputted by the user to a modal that resides in the same component, all without the need for child or parent components or

In need of a solution where users can input answers to questions and have all the entered data displayed in a popup alongside the respective question. If a user chooses not to answer a question, I do not want that question or any related information to be ...

htmlcssjsonangulartypescript

"The Vuetify calendar widget is cutting off some dates at the end of the month

Currently, I am using the vuetify date picker in my project. The API that I am interfacing with will showcase data within a specific date range. I have utilized the date picker component along with the range prop to achieve this functionality successfully. ...

htmlcssvue.jsvuetify.js

Disable the ability to scroll the background when the lightbox is opened

Currently incorporating Featherlight for a lightbox feature. Encountering an issue where the background remains scrollable when the lightbox is open. Typically, lightboxes require adding a class to the body with overflow:hidden; to resolve this problem. S ...

jquerycssfeatherlight.js

CSS3 :not does not exclude a selector by id

Hello wonderful community of Stackoverflow, Here is my CSS code: .text:not(#overview > *) { margin-top: 10px; margin-bottom: 10px; } I am trying to apply a 10px top and bottom margin to everything with the class "text", except for elements ma ...

htmlcss

The dropdown next to the text area does not seem to be functioning properly

Hello everyone, I am attempting to align a textarea, an image upload button, and a select dropdown all in the same line as shown in the image below. https://i.sstatic.net/8Ws0m.png Here is my current code: <div class="col-md-10 div_qtype"> ...

htmlcssbootstrap-4

An error occurred when executing Selenium through Python due to an invalid selector issue

While attempting to save a document, I encountered an issue. Using Firefox and the Firefox IDE, the following target worked perfectly: css=div.ui-dialog-buttonset button:contains('Yes, ') However, when trying to implement it in Python with the ...

pythoncssseleniumxpath

Exploring the potential of CSS Grid with dynamic content

I have a paragraph that contains text, possibly a span element, as well as some pseudo-content using the :before and :after selectors: <p>Regular text with no span</p> <p>Extra content with a <span>span</span></p> My go ...

csspseudo-element

Empty space found at the bottom of a webpage while viewing on smaller browser resolutions due to the CSS-Grid layout

Recently, I've been working on designing a website layout using CSS-Grid. Everything seems to be functioning properly and adapting well to different screen sizes until I encountered an issue with scroll bars appearing at very small resolutions. This c ...

htmlcssfont-sizecss-grid

Utilizing Jquery Masonry to create a visually appealing layout with dynamically sized items

Greetings, I am currently facing an issue on my blog where the grid resizes when clicking on an item, but the masonry layout doesn't adjust accordingly and causes items to become disorganized. If you'd like to see an example of this issue in act ...

javascriptjquerycssjquery-masonry

Toggle the sidebars to slide out and expand the content division using JavaScript

I am looking to achieve a smooth sliding out effect for my sidebars while expanding the width of the middle content div. I want this action to be toggled back to its original state with another click. Here's what I've attempted so far: $(' ...

javascriptjqueryhtmlcss

Can the z-index property be applied to the cursor?

Is it possible to control the z-index of the cursor using CSS or Javascript? It seems unlikely, but it would be interesting if it were possible. Imagine having buttons on a webpage and wanting to overlay a semi-transparent image on top of them for a cool ...

javascriptcss

What is the best way to navigate to the top of a form panel?

I'm currently developing a Sencha Touch mobile app. I have a form panel with multiple fields, so I made it scrollable. However, every time I open the screen (panel), scroll down, navigate to other screens, and then return to the form panel, it stays s ...

javascriptjqueryhtmlcsssencha-touch

Choose a specific div within a different div by referencing its CSS class

Is there a way to specifically target the <div class="widget-area"> element only when it is preceded by a <div class="store-content"> element? This is how the HTML structure looks: <!--Store Content Div--> <div id="content" role="mai ...

htmlcsscss-selectors

Why is there white space/padding occurring within this div element?

I need the red border to be snugly wrapped around the blue text (no whitespace). What is causing the extra space and how can I eliminate it? #propertyDetails .display_address { font-size: 1.75rem; font-weight: bold; color: #3498db; margin:0px; padding: ...

htmlcss

Webpages fail to load correctly on all browsers due to issues with the HTML files

I've been working with examples from MDN and an online course for a few days now. Suddenly, my HTML files are not loading correctly in any browser I try (Firefox, Chrome, IE, Edge). Most of the body content is missing. This issue began last night. An ...

htmlcss

Tips for adding a personalized background below the jumbotron

#particles-js{ background:rgba(0, 10, 14,.8); height:100%; position: absolute; top:55px; left:0; width:100%; min-height:700px; background-size: cover; background-position: center; overflow: hidden; } #jumbotron{ margin: auto; width ...

csshtmlbootstrap-4