I’ve been trying to move this span (+ sign) down a bit so that it’s in line with the question, been trying margin, padding top or bottom, but nothing works. tried removing the other padding from parent classes still didn’t work. can anyone spot my mistake, thanks 🙂
(function($) {
$(function() {
$('.faqs dt').click(function () {
$(this).children('.plusminus').text($(this).children('.plusminus').text() == '+' ? '−' : '+');
$(this).next('.faqs dd').slideToggle(500);
});
});
})(jQuery); .faqs {
cursor: pointer;
border: #edeceb solid 1px;
border-radius: 3px;
margin: 20px 0;
padding: 30px 35px 10px;
line-height: 200%;
}
dt{
font-size: 1.125rem;
font-weight: 700;
margin-top: -20px;}
.plusminus{
font-weight: 100;
font-size: xxx-large;
}
.answer{
display: none;
margin: 10px 0;
}
.date{
color: #a6a6a6;
font-size: 0.750rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab--container">
<div class="tab--content">
<div class="content--faqs">
<div class="content--title">
Q&A
</div>
<dl class="faqs">
<dt><span class="plusminus">+</span> Question 1?</dt>
<dd class="answer">Answer 1.<br>
<div class="date">
Answer date.
</div></dd>
</dl>
<dl class="faqs">
<dt><span class="plusminus">+</span> Question 2?</dt>
<dd class="answer">Answer 2.<br>
<div class="date">
Answer date.
</div></dd>
</dl>
</div>
</div>
</div>>Solution :
One of my favourite challenges. It was an issue of the line-height and so on. I added these:
.plusminus {
font-weight: 100;
font-size: xxx-large;
line-height: 0;
position: relative;
top: 0.15em;
}
Hope this gives you what’s the reason.
Preview
Here’s the full code:
(function($) {
$(function() {
$('.faqs dt').click(function() {
$(this).children('.plusminus').text($(this).children('.plusminus').text() == '+' ? '−' : '+');
$(this).next('.faqs dd').slideToggle(500);
});
});
})(jQuery);.faqs {
cursor: pointer;
border: #edeceb solid 1px;
border-radius: 3px;
margin: 20px 0;
padding: 30px 35px 10px;
line-height: 200%;
}
dt {
font-size: 1.125rem;
font-weight: 700;
margin-top: -20px;
}
.plusminus {
font-weight: 100;
font-size: xxx-large;
line-height: 0;
position: relative;
top: 0.15em;
}
.answer {
display: none;
margin: 10px 0;
}
.date {
color: #a6a6a6;
font-size: 0.750rem;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tab--container">
<div class="tab--content">
<div class="content--faqs">
<div class="content--title">
Q&A
</div>
<dl class="faqs">
<dt><span class="plusminus">+</span> Question 1?</dt>
<dd class="answer">Answer 2.<br>
<div class="date">
Answer date.
</div>
</dd>
</dl>
<dl class="faqs">
<dt><span class="plusminus">+</span> Question 2?</dt>
<dd class="answer">Answer 2.<br>
<div class="date">
Answer date.
</div>
</dd>
</dl>
</div>
</div>
</div>