CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Max
Max

Reputation: 375

Remove space between rows

I have a row for every dilemma/question and a image-button beside the questions. When I click the button, an answer for the specific question appears just below the question. The answers are hidden until I click on a button to show them. However, before I click on button of a question, all the questions are listed with no answers shown.

The problem I want to solve is that there is too much space between the questions and I suppose that the reason is that the hidden text is between them. I would like to fix that there is not much space between the question rows when no one is clicked, and then show the answer-text below the clicked question. It already shows the answer below the question after being clicked, but I want to remove the big space when it is not clicked. The thing is that I don't even have any <br> between the question and answer, and there is much space probably because of the hidden text.

Is it something I have to add to the CSS? I show you what I have.

 <style> 
  .question-wrap {
   margin-bottom: 2em
  }
  p.answer {
    display: none
  }
 </style>

  <script>
        $(document).ready(function(){
        $(".answer-toggle").click(function(){
            $(this).closest('.question-wrap').find('.answer').toggle();
            });
        });
  </script>

    echo "<div class='question-wrap'><b><small>Dilemma ".$row['qid']." - Svar ". $row['aid'].":</small></b> ". $row['points']." av 10 <b><small>Poäng</small></b>
    <button class='answer-toggle'><input type='image' title='Information' src='img/down.png' width='13' height='10'></button>
    <p class='answer'>This is a paragraph with little content.</p></div>
    <br>";

Upvotes: 1

Views: 232

Answers (1)

castletheperson
castletheperson

Reputation: 33466

There is nothing wrong with your JavaScript or HTML, but your CSS has a pretty obvious problem.

You have a margin-bottom: 2em; on every question, along with a <br> between each question/answer pair. All of that spacing is really adding up, so to remove the spacing, either

  • Remove the margin-bottom statement.

    or

  • Remove the <br> tag and change the margin-bottom to something like 0.5em.

I recommend doing the second option because CSS should in charge of styling, not HTML.

$(document).ready(function() {
  $(".answer-toggle").click(function() {
    $(this).closest('.question-wrap').find('.answer').toggle();
  });
});
.question-wrap {
  margin-bottom: 0.5em; /* Change this to what you want */
}
p.answer {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='question-wrap'>
  <b>Question 1</b>
  <button class='answer-toggle'>Show Answer</button>
  <p class='answer'>Answer 1</p>
</div>
<div class='question-wrap'>
  <b>Question 2</b>
  <button class='answer-toggle'>Show Answer</button>
  <p class='answer'>Answer 2</p>
</div>
<div class='question-wrap'>
  <b>Question 3</b>
  <button class='answer-toggle'>Show Answer</button>
  <p class='answer'>Answer 3</p>
</div>

Upvotes: 1

Related Questions