删除行之间的空间

Question

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>";

Answer 1

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>