テキストの表示と非表示はどうですか？

Question

私のコードで私の望むテキストを作ることができます。テキストのクリックやイメージのクリックに表示したいものは何でもできますが、再び隠すことはできません。これを逆にして（リンクをクリックする前のように）テキストをもう一度見えなくするにはどうしたらいいですか？あなたが別のボタンをクリックしたときに

.pink { 
 
\t width: 100%; 
 
\t color: #FFF; 
 
\t background-color: #ea0042; 
 
\t padding: 20px; 
 
\t box-shadow: 0px 5px 10px #D5D5D5; 
 
} 
 

 
a { 
 
\t color: inherit; 
 
\t text-decoration: none; 
 
}

<div class="pink"> 
 

 
     <a href="#" onclick="document.getElementById('hiddenText').style.display='block'; return true;"> 
 
     <p> SEARCH FOR PRODUCTIONS </p> 
 
     <img src="icon-arrow-down-b-128.png" alt="" height="15px"> 
 
     </a> 
 
     <div style="display: none;" id="hiddenText"> 
 
     
 
    dasdgasasfgas 
 
     </div> 
 

 

 
</div>

Answer 1

を意味していますか？以下

は最も単純方法がjQueryのからのトグル（）を使用することである,,

.pink { 
 
\t width: 100%; 
 
\t color: #FFF; 
 
\t background-color: #ea0042; 
 
\t padding: 20px; 
 
\t box-shadow: 0px 5px 10px #D5D5D5; 
 
} 
 

 
a { 
 
\t color: inherit; 
 
\t text-decoration: none; 
 
}

<div class="pink"> 
 

 
     <a href="#" onclick="document.getElementById('hiddenText').style.display='block'; return true;"> 
 
     <p> SEARCH FOR PRODUCTIONS </p> 
 
     <img src="icon-arrow-down-b-128.png" alt="" height="15px"> 
 
     </a> 
 
    
 
    <a href="#" onclick="document.getElementById('hiddenText').style.display='none'; return true;"> 
 
     <p> Hide </p> 
 
     <img src="icon-arrow-down-b-128.png" alt="" height="15px"> 
 
     </a> 
 
    
 
     <div style="display: none;" id="hiddenText"> 
 
     
 
    dasdgasasfgas 
 
     </div> 
 

 

 
</div>

Answer 2

表示なしを使用していません。したがって、私の回答の最初の行では、jqueryをソリューションにインポートします：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 

<style> 
.pink { 
    width: 100%; 
    color: #FFF; 
    background-color: #ea0042; 
    padding: 20px; 
    box-shadow: 0px 5px 10px #D5D5D5; 
} 

a { 
    color: inherit; 
    text-decoration: none; 
} 
</style> 



<div class="pink"> 

     <a href="#" id='toggleLink' > 
     <p> SEARCH FOR PRODUCTIONS </p> 
     <img src="icon-arrow-down-b-128.png" alt="" height="15px"> 
     </a> 
     <div id="hiddenText"> 
      dasdgasasfgas 
     </div> 

</div> 


<script> 
$(function(){ 

    $('#toggleLink').click(function(){ 
     $('#hiddenText').toggle(); 
    }); 

}); 
</script>