如何使这个确切的效果？？？请尽可能只css？

Question

访问link： https://www.earthhour.org/earthhour-faqs

我可以显示隐藏文本，但我根本不知道当该文本出现时如何使所有剩余文本自动向下移动，如图所示。

如果你能用一个简单的示例页面解释整个事情，包括如何使隐藏文本出现（因为我对此有一些疑问），那将是很好的。 CSS 和 HTML 仅请!!

HTML:

   <li class="views-row views-row-1 views-row-odd views-row-first ui-accordion ui-widget ui-helper-reset" role="tablist">  
          <h4 class="question ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" id="ui-accordion-3-header-0" aria-controls="ui-accordion-3-panel-0" aria-selected="false" tabindex="0">What is Earth Hour?</h4>    
          <div class="answer ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-accordion-3-panel-0" aria-labelledby="ui-accordion-3-header-0" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none;"><p>Earth Hour is a worldwide grassroots movement uniting people to protect the planet, and is organised by WWF. Engaging a massive mainstream community on a broad range of environmental issues, Earth Hour was famously started as a lights-off event in Sydney, Australia in 2007. Since then it has grown to engage more than 7000 cities and towns worldwide, and the one-hour event continues to remain the key driver of the now larger movement.</p>
</div>  </li>

必须做 post html，否则网站不允许我 post 这个问题。

Answer 1

不确定你到底想做什么。这是您可以尝试显示一个 div/text 的解决方案，它会自动将其他 div 向下移动。

function showDiv()
{
  
  $('.first').css("display","block");
 }

.first
{
  display : none;
  border : 1px solid red;
  }

.second 
{
  display : block;
  border : 1px solid yellow;
  margin : 5px auto;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first">hidden text</div>
<div class="second">Second div</div>
<div class="second">Third div</div>
<br/>
<button onclick="showDiv()"> show div</button>

Answer 2

希望对您有所帮助。

.collapse-header{
  cursor: pointer;
  display: block;
  background: #cdf;
}
.collapse-header + input{
  display: none; /* hide the checkboxes */
}
.collapse-header + input + div{
  display:none;
}
.collapse-header + input:checked + div{
  display:block;
}

<label class="collapse-header" for="_1">Collapse 1</label>
<input id="_1" type="checkbox"> 
<div>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</div>

<label class="collapse-header" for="_2">Collapse 2</label>
<input id="_2" type="checkbox">
<div>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit</div>

如何使这个确切的效果？？？请尽可能只css？

How to make this exact effect???only css as far as possible pls?

html

styles