单击HTML扩展框

Question

I want to create three boxes with some short text and when you click on one of those boxes, it will expand on the full width of the page and displays the whole content. Then it can be closed by clicking on some kind of icon.

I created a gif so you can see what I mean. GIF

I have so far the basic structure on jsfiddle

When you click on one box it every time opens the box-3 content insted of the content of the clicked box. Also I dont know how to close the open box.

Is the animation you can see in the gif possible with css or does it need javascriptl?

$(".row.boxes-container .box").click(function (e) {
        $(".box-content-full").addClass("open");
    });


.row.boxes-container{
    position:relative;   
}

.box:hover{
    cursor:pointer;   
}

.box-content{
    padding:30px;
    background-color:#f03939;
}

.box-content-full{
    display:none;   
    width:0%;
    transition: width 1s;
}

.box-content-full.open {
    position: absolute;
    max-width: 100%;
    width: 100%;
    z-index: 2;
    display:block;
    transition: width 1s;

}

.box-content-full.open .inner{
    padding:30px;
    margin-left:15px;
    margin-right:15px;
    background-color: red;

}


<div class="container">
        <div class="row boxes-container">

            <div class="box first">
                <div class="box-content-full">
                    <div class="inner">
                        <div class="inner-header">
                            <span class="close">x</span>
                        </div>
                        <h3>Box 1</h3>
                        <p>Lorem ipsum dolem filum</p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="box-content">
                        <h3>Box 1</h3>
                    </div>
                </div>
            </div>

            <div class="box second">
                <div class="box-content-full">
                    <div class="inner">
                        <div class="inner-header">
                            <span class="close">x</span>
                        </div>
                        <h3>Box 2</h3>
                        <p>Lorem ipsum dolem filum</p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="box-content">
                        <h3>Box 2</h3>
                    </div>
                </div>
            </div>

            <div class="box third">
                <div class="box-content-full">
                    <div class="inner">
                        <div class="inner-header">
                            <span class="close">x</span>
                        </div>
                        <h3>Box 3</h3>
                        <p>Lorem ipsum dolem filum</p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="box-content">
                        <h3>Box 3</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

I did not use your html code but tried to get a result as close as possible to your gif:

 $('.box').on('click', function() { var $element = $(this); var $openElement = $('<div class="absoluteBox"></div>'); $openElement.css('left', $element.position().left); $openElement.css('right', $element.width()); $element.html($openElement); $openElement.animate({left : 0, width : $('.wrapper').width()}, 500); }); 

 .wrapper { position:relative; display:inline-block; } .box { background-color:#CC0000; width:150px; height:200px; display:inline-block; margin-right:10px; } .box:last-of-type { margin-right:0; } .absoluteBox { position:absolute; background-color:blue; height:200px; width:150px; } .box:hover { background-color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="wrapper"> <div class="box"></div> <div class="box"> </div> <div class="box"></div> </div> 

I made the opening box blue to be better noticed. This has to be changed via css of course to red.

Answer 2

Updated your fiddle:

EDIT 2:
Now it should reset when you click the box.

PS Click the second box for the effect.
PPS The effect displays incorrectly because the page contracts automatically in JSFiddle. ALTHOUGH, if you try it elsewhere and it doesn't work, consider me proven wrong!

EDIT:
Updated answer to expand element that was clicked.

https://jsfiddle.net/bszv7f90/9/

 $(".row.boxes-container .box").click(function(e) { $(this).children().each(function(i) { if ($(this).attr('class') == 'box-content-full') { $(this).toggleClass("exp"); } }); $(".box-content-full").toggleClass("open"); $(".box-content").toggleClass("clicked"); }); 

 .container { max-width: 600px; } .row.boxes-container { position: relative; } .box:hover { cursor: pointer; } .box-content { padding: 30px; background-color: #f03939; } .box-content-full { display: none; width: 0%; transition: width 1s; } .box-content { padding: 30px; background-color: #f03939; } .box-content.clicked { display: none; } .box-content-full.open { position: absolute; max-width: 0%; width: 0%; z-index: 2; display: none; transition: width 1s; } .box-content-full.open.exp { position: absolute; max-width: 100%; width: 100%; z-index: 2; display: block; transition: width 1s; } .box-content-full.open .inner { padding: 30px; margin-left: 15px; margin-right: 15px; background-color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row boxes-container"> <div class="box first"> <div class="box-content-full"> <div class="inner"> <div class="inner-header"> <span class="close">x</span> </div> <h3>Box 1</h3> <p>Lorem ipsum dolem filum</p> </div> </div> <div class="col-md-4"> <div class="box-content"> <h3>Box 1</h3> </div> </div> </div> <div class="box second"> <div class="box-content-full"> <div class="inner"> <div class="inner-header"> <span class="close">x</span> </div> <h3>Box 2</h3> <p>Lorem ipsum dolem filum</p> </div> </div> <div class="col-md-4"> <div class="box-content"> <h3>Box 2</h3> </div> </div> </div> <div class="box third"> <div class="box-content-full"> <div class="inner"> <div class="inner-header"> <span class="close">x</span> </div> <h3>Box 3</h3> <p>Lorem ipsum dolem filum</p> </div> </div> <div class="col-md-4"> <div class="box-content"> <h3>Box 3</h3> </div> </div> </div> </div> </div> 

Now it should expand. I preserved your code to make a quick copy-paste.