I'm in front of a problem that I don't succeed to resolve from couple of hours.
I have two lines of "buttons", and when you hover a button a text need to be displayed ( full width ) under the line where was the button.
My problem is that, this part is ok, but when the text is displayed he is hiding the next line of "buttons", I would like for this line to be "pushed" by the hover animation that display the text under the first line.
Can someone help me to do that and to explain to me why it's not working actually ? I think the absolute tag on the CSS is ruining my plan.
body {
font-family: helvetica;
font-size: 18px;
text-align: center;
}
.column1 {
width: 100%;
}
.column2 {
width: 100%;
}
div{
float:left;
}
.accordion {
display: inline-block;
text-align: left;
margin: 1%;
width: 20%;
}
.accordion:hover .accordion-content {
max-height: 300px;
}
.accordion-content {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
max-height: 0;
position:absolute;
left:0;
}
.accordion-inner {
padding: 0 15px;
}
.accordion-toggle {
-webkit-transition: background .1s linear;
-moz-transition: background .1s linear;
-ms-transition: background .1s linear;
-o-transition: background .1s linear;
transition: background .1s linear;
background: #00b8c9;
border-radius: 3px;
color: #ffffff;
display: block;
font-size: 30px;
margin: 0 0 10px;
padding: 10px;
text-align: centre;
text-decoration: none;
}
.accordion-toggle:hover {
background: #00727d;
}<div >
<div >
<a >Hover 1</a>
<div >
<div >
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
<div >
<a >Hover 2</a>
<div >
<div >
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
<div >
<a >Hover 3</a>
<div >
<div >
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
</div>
<div >
<div >
<a >Hover 4</a>
<div >
<div >
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
<div >
<a >Hover 5</a>
<div >
<div >
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
<div >
<a href="#" >Hover 6</a>
<div >
<div >
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
</div>CodePudding user response：
The simplest solution is that you have to move divs outside .accordion. Like that.
body {
font-family: helvetica;
font-size: 18px;
text-align: center;
}
.column1 {
width: 100%;
}
.column2 {
width: 100%;
}
div{
float:left;
}
.accordion-style {
display: inline-block;
text-align: left;
margin: 1%;
width: 22%;
}
.accordion1:hover ~ .accordion-content1, .accordion2:hover ~ .accordion-content2, .accordion3:hover ~ .accordion-content3, .accordion4:hover ~ .accordion-content4, .accordion5:hover ~ .accordion-content5, .accordion6:hover ~ .accordion-content6 {
max-height: 300px;
}
.accordion-content-style {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
max-height: 0;
left:0;
}
.accordion-inner {
padding: 0 15px;
}
.accordion-toggle {
-webkit-transition: background .1s linear;
-moz-transition: background .1s linear;
-ms-transition: background .1s linear;
-o-transition: background .1s linear;
transition: background .1s linear;
background: #00b8c9;
border-radius: 3px;
color: #ffffff;
display: block;
font-size: 30px;
margin: 0 0 10px;
padding: 10px;
text-align: centre;
text-decoration: none;
}
.accordion-toggle:hover {
background: #00727d;
}<div >
<div >
<a >Hover 1</a>
</div>
<div >
<a >Hover 2</a>
</div>
<div >
<a >Hover 3</a>
</div>
<div >
<div >
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
<div >
<div >
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
<div >
<div >
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>
<div >
<div >
<a >Hover 4</a>
</div>
<div >
<a >Hover 5</a>
</div>
<div >
<a href="#" >Hover 6</a>
</div>
<div >
<div >
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
<div >
<div >
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
<div >
<div >
<p>For animate the "height" of element with CSS Transitions you need use "max-height".</p>
<p>If use the "height: auto", the effect not works. Is necessary some value for the CSS create a CSS animate, and you can use "max-height" with a great value for emulate this effect.</p>
</div>
</div>
</div>CodePudding user response：
Try changing this block. The position:relative will make the div actually be between the two lines of buttons. Then, set the width that u want that text to be. You can't use 100%, but, if as you said you want to get it full width, try using 100vw, which is equivalent to the full viewport width value. Replace with this and it should work as intended:
.accordion-content {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background: #e5feff;
overflow: hidden;
max-height: 0;
position:absolute;
left:0;
}
CodePudding user response：
You could remove position: absolute; from .accordion-content and add
display: flex; to .column1 and .column2
Now, I don't know if it'll be a problem to you, but the limitation of this solution is that it will contain the text that appear under to the size of your buttons.
Hope that fixes your problem