Как показать и скрыть текст?

Question

Я могу с помощью своего кода сделать желаемый текст или все, что я хочу, появившимся при щелчке по тексту или по изображению, но я не могу убрать его, чтобы снова скрыть. Как я могу изменить это и сделать текст снова невидимым (как это было до нажатия на ссылку)?

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

a {
 color: inherit;
 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

Вы имеете в виду, когда вы нажимаете другую кнопку?

Ниже используются индикаторы

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

a {
 color: inherit;
 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

Самый простой способ - использовать toggle() из jQuery. Итак, в первой строке моего ответа я импортирую 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>