Question

0

240

Visualizações

plus sign doesnt move up or down

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>

about 4 years ago · Juan Pablo Isaza

3 Respostas

Responde à pergunta

0

You can use the flexbox property to move this span (+ sign) down a bit so that it's in line with the question,

(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{
        display: flex;
        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 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>

about 4 years ago · Juan Pablo Isaza Relatório

0

its because of font-size you given to the plusminus insted of this you can give the font-size to its parent class.

about 4 years ago · Juan Pablo Isaza Relatório

Responde à pergunta

Encontrar trabalhos remotos

Accepted Answer · 2022-06-28T09:58:07.235Z

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>

0

240

plus sign doesnt move up or down

3 Respostas

0

0

0

Encontrar trabalhos remotos

Andres GPT