Question

194

how to change collapse direction of a panel in bootstrap

rated 0 times [ 196] [ 2] / answers: 1 / hits: 19357 / 9 Years ago, tue, november 17, 2015, 12:00:00

I have a well-known basic collapsible panel which its codes mentioned belowed. I changed some properties via css sets like collapse-in and collapse height&width but could not achieve to change collapsing direction. I want to change it towards top opposite to default position. How can I do that? I assure you that I tried several ways but could not solve the issue.

<div class=panel-group>

    <div class=panel panel-default>

        <div class=panel-heading>

             <h4 class=panel-title>

                        <a data-toggle=collapse href=#collapse1>Collapsible panel</a>

                    </h4>



        </div>

        <div id=collapse1 class=panel-collapse collapse>

            <div class=panel-body>Panel Body</div>

            <div class=panel-footer>Panel Footer</div>

        </div>

    </div>

</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jovanymarshalld

Add To Favorites

Follow

Total Points: 676

Total Questions: 94

Total Answers: 81

Location: Thailand

Member since Thu, Apr 22, 2021

3 Years ago

answered 9 Years ago breap · Accepted Answer

Just interchange the positions of .panel-heading and #collapse1.

<!DOCTYPE html>

<html lang=en>

<head>

  <title>Bootstrap Example</title>

  <meta charset=utf-8>

  <meta name=viewport content=width=device-width, initial-scale=1>

  <link rel=stylesheet href=http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css>

  <script src=https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js></script>

  <script src=http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js></script>

</head>

<body>



<div class=panel-group>

            <div class=panel panel-default>

                

                <div id=collapse1 class=panel-collapse collapse>

                    <div class=panel-body>Panel Body</div>

                    <div class=panel-footer>Panel Footer</div>

                </div>



<div class=panel-heading>

                    <h4 class=panel-title>

                        <a data-toggle=collapse href=#collapse1>Collapsible panel</a>

                    </h4>

                </div>

            </div>

        </div>



</body>

</html>