CODEWITHSUNDEEP
jqueryhtmlcssbootstrap-4
pileup
pileup

Reputation: 3262

jQuery slideToggle - Don't push content, hide content and fill parent div

I am using Bootstrap 4 card and I want the card header to act as a slide toggle - When you click the header it should slide down a div to fill the height and width of the card div, and also not push down the card, and hide the original card content with its own content. The problem is that everything I try solves one problem but not the other: For example I can make it not push down content with absolute positioning, but then its content will be hidden behind the card content, or not fill the card

This is something close to what I want: 

            $(document).ready(function () {
                $(".flip").click(function () {                  
                    $(this).siblings(".panel").slideToggle("slow");
                });
            });
        
            .panel, .flip {
                padding: 5px;
                text-align: center;
                background-color: #e5eecc;
                border: solid 1px #c3c3c3;
            }

            .panel {
                
                padding: 50px;
                display: none;
                
            }
            .flip{
                    cursor:pointer;

            }
            
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <div class="card text-center">
            <div class="card-header flip">      
                Card Header - Click Me
            </div>
            <div class="panel">Hello world!</div>
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some card text here.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
            
            <div class="card-footer text-muted">
               Footer
            </div>
        </div>

Upvotes: 2

Views: 645

Answers (2)

Drobesz
Drobesz

Reputation: 384

Max-height property is what you need. Here's what I made with your code. I edited your DOM-tree a bit, but it works like what you described! :) Or maybe I've misunderstood your problem.

            $(document).ready(function () {
                $(".flip").click(function () {                  
                    $(this).siblings(".card-content").find(".panel").slideToggle("slow");
                });
            });
        
            .panel, .flip{
                padding: 5px;
                text-align: center;
                background-color: #e5eecc;
                border: solid 1px #c3c3c3;
            }
            .panel{
                width: 100%;
                height: 100%;
                display: none;
            }
            .card-content{
                overflow: hidden;
                max-height: 180px;
            }
            .card-body{
                width:100%;
                height:180px;
            }
            .flip{
                cursor:pointer;
            }
            
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <div class="card text-center">
            <div class="card-header flip">      
                Card Header - Click Me
            </div>
            
            <div class="card-content">
                <div class="panel">Hello world!</div>
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some card text here.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
            
            <div class="card-footer text-muted">
               Footer
            </div>
        </div>

Upvotes: 0

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

This is the solution using absolute positioning with some changes. I have used relative position for card so the panel be absolute to it (not to the whole document). Also used fixed height for .card-body and .panel to make their heights equal. If you hate fixed height, you may use a javascript to make their height equal after DOM ready. Also if you have multiple cards on a page, You may need also define a certain height for each card because the relative position does not occupy a place in the document.

$(document).ready(function () {
                $(".flip").click(function () {                  
                    $(this).siblings(".panel").slideToggle("slow");
                });
            });
.panel, .flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;

}

.panel {
    padding: 50px;
    display: none;
    position:absolute;
    z-index:2;
    top:50px;
    width:100%;
    height:160px;
}

.flip{
  cursor:pointer;
}

.card-body{
height:160px
}

.card{
position:relative;
top:0;left:0
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <div class="card text-center">
            <div class="card-header flip">      
                Card Header - Click Me
            </div>
            <div class="panel">Hello world!</div>
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some card text here.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
            
            <div class="card-footer text-muted">
               Footer
            </div>
        </div>

Upvotes: 1

Related Questions