この正確な効果を作るにはどうすればいいですか？

Question

訪問リンク： https://www.earthhour.org/earthhour-faqs

私は隠されたテキストを表示させることが可能ですが、私は単純に示すように、そのテキストが、残りのすべてのテキストが自動的に下に移動させるためにどのように表示されていることは考えています。

また、単純な例文を使って隠れたテキストを表示する方法（それにはいくつか疑問があるので）を含めて、すべてを説明すると良いでしょう。 CSSとHTMLのみpls！

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> 

は、ポストHTML、私は質問を投稿することができ波平それ以外のサイトをしなければなりませんでした。

Answer 1

それはあなたに役立ちます願っています。

.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>

Answer 2

正確に何をしたいか分かりません。これは、他のdivを自動的に下に移動する1つのdiv/textを表示しようとすることができる1つのソリューションです。

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>