I'm working on example of collapse event with mouse click:
How I can align the arrow and the question? Also when I expand the question the arrow is not fully rotated. Is there any solution for these problems?
HTML:
<div class="container faq_wrapper">
<div class="row">
<div class="span10 offset1">
<p>
</p>
<div class="faq-all-actions">
<a class="faq-expand">Expand All</a> | <a class="faq-collapse">Collapse All</a></div>
</div>
</div>
<div class="row">
<div class="span10 offset1">
<div class="question-wrapper">
<div class="arrows">
</div>
<div class="big-q">
Q</div>
<div class="question">
<div class="arrow" ></div><h6><font size="6">Can I try the software before I buy it?</font></h6></div>
<div class="answer-wrapper">
<div class="big-a">
A</div>
<div class="answer">
Yes! Simply <a href="/trial">download a free trial</a> and you'll have instant access to all features for 30 days, absolutely free. We don't require your credit card details or any commitment.</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.answer-wrapper {
display: none;
}
.arrow::before {
position: absolute;
content: "";
display: inline-block;
/* By using an em scale, the arrows will size with the font */
width: 0.4em;
height: 0.4em;
border-right: 0.2em solid black;
border-top: 0.2em solid black;
transform: rotate(45deg);
margin-right: 0.9em;
}
.arrow.down::before {
transform: rotate(90deg);
transition: transform .25s;
}
.question h6 {
margin-left: 15px;
}
Here's the fiddle: https://jsfiddle.net/zeamgd9s/3/
.question{
display:table;
}
.question > *{
display:table-cell;
vertical-align:middle;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments