Wie kann man Text ein- und ausblenden?

Question

Ich bin in der Lage mit meinem Code, um meinen gewünschten Text oder was auch immer ich will erscheinen auf einem Text klicken oder Bild klicken, aber ich kann es nicht zurückziehen, um es wieder versteckt zu machen. Wie kann ich das umkehren und den Text wieder unsichtbar machen (wie vor dem Klicken auf den Link)?

.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

Meinen Sie in, wenn Sie einen anderen Knopf klicken?

Unten werden unter Verwendung Anzeige keine ,,

.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

Die einfachste Methode Toggle zu verwenden ist() von jQuery. Also in der ersten Zeile meiner Antwort werde ich jquery in die Lösung importieren:

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