CODEWITHSUNDEEP
cssbootstrap-4
Shivaraj Nesargi
Shivaraj Nesargi

Reputation: 139

div is initially collapsed even after using 'collapse in' class for it

In the below code the division #content1 is initially being collapsed even after using "collapse in" class. What should I do to show the content of Column1 initially? Note: I don't want to use any javascript function to handle this task

  <!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>

Upvotes: 0

Views: 30

Answers (1)

Stuart
Stuart

Reputation: 6785

.in was used in bootstrap 3 (https://getbootstrap.com/docs/3.3/javascript/#collapse). In bootstrap 4 it's now .show (https://v4-alpha.getbootstrap.com/components/collapse/#example).

So you need to add the class .show to the div:

<!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>

        <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>

Upvotes: 1

Related Questions