CODEWITHSUNDEEP
htmlonclickhideshow
SCJ
SCJ

Reputation: 25

How to show and hide text?

I am able with my code to make my desired text or whatever I want appear on a text click or image click but I cannot retract it to make it hidden again. How can I reverse this and make the text invisible again(like it was before clicking the link)?

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

Upvotes: 1

Views: 119

Answers (2)

Arizona2014
Arizona2014

Reputation: 1347

The simpliest method is to use toggle() from jQuery. So on the first line of my response I'll import jquery into the solution :

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

Upvotes: 0

Abu Yousef
Abu Yousef

Reputation: 570

Do you mean in when you click another button ?

Below are using display none,, 

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

Upvotes: 1

Related Questions