CODEWITHSUNDEEP
javascripthtmlonclick
user4552190
user4552190

Reputation: 1

Javascript code to hide/display a given element when clicking an <a> tag

Is it possible click the same link to hide and display coy below? This is what I have so far. I was able to create a javascript to display copy but I couldn't figure out how to click the same link to hide it. I have basic knowledge of html. This is the code that I am using

<p>
    <strong>
        <a href="javascript:;" onclick="document.getElementById('text1').style.display='block';">
            Gifts that Don't Impact your Lifestyle
        </a>
    </strong>
    <div id="text1" style="display: none; margin-top: 2px;">
        There are many ways to give a gift to without impacting your lifestyle.
    </div>
</p>
<p>
    <strong>
        <a href="javascript:;" onclick="document.getElementById('text2').style.display='block';">
            Gifts that Increase your Income
        </a>
    </strong>
</p>
<div id="text2" style="display: none;">
    You can enhance your income while supporting a Charitable Gift Annuity or Charitable Remainder Trust.
</div>
<p>
    <strong>
        <a href="javascript:;" onclick="document.getElementById('text3').style.display='block';">
            Gifts that Provide for your Heirs
        </a>
    </strong>
    <div id="text3" style="display: none;">
        You can pass assets to your family on a tax favorable basis while providing immediate support.
    </div>
</p>

Upvotes: 0

Views: 242

Answers (4)

Drifter
Drifter

Reputation: 281

Strictly using your html style

Your html

<p><strong><a class="toggleSubText" href="#">Gifts that Don't Impact your Lifestyle</a></strong><div style="margin-top:2px;display:none">There are many ways to give a gift to without impacting your lifestyle.</div></p>

<p><strong><a href="#" class="toggleSubText">Gifts that Increase your Income</a></strong></p><div id="text2" style="display:none;">You can enhance your income while supporting a Charitable Gift Annuity or Charitable Remainder Trust.</div>

<p><strong><a href="#" class="toggleSubText">Gifts that Provide for your Heirs</a></strong><div id="text3" style="display:none;">You can pass assets to your family on a tax favorable basis while providing immediate support.</div></p>

The JS

function toggleDisplay( event ){
   var sub = event.target.parentNode.parentNode.nextSibling;
   sub.style.display = sub.style.display === 'block' ? 'none' : 'block';
   return false;
}


var ankersForSubText = document.getElementsByClassName("toggleSubText");

Array.prototype.filter.call(ankersForSubText, function(testElement){
   testElement.addEventListener("click", toggleDisplay, false);;
});

Codepen for test

Personally, I would do the html this way:

<div class="toggleSubText>
   <a href="#">Gifts that Don't Impact your Lifestyle</a>
   <span class='subtext'>There are many ways to give a gift to without impacting your lifestyle.</span>
</div>

Upvotes: 0

MaxZoom
MaxZoom

Reputation: 7753

You can create a separate function to handle click event

function toggle(div) {
  if ('block' == div.style.display)
    div.style.display = "none";
  else
    div.style.display = "block";

  return false;
}
<p>
<strong>
  <a href="javascript:;" onclick="return toggle(document.getElementById('text1'))">
    Gifts that Don't Impact your Lifestyle
  </a>
</strong>
<div id="text1" style="display: none; margin-top: 2px;">
  There are many ways to give a gift to without impacting your lifestyle.
</div>
</p>
<p>
<strong>
  <a href="javascript:;" onclick="return toggle(document.getElementById('text2'))">
    Gifts that Increase your Income
  </a>
</strong>
</p>
<div id="text2" style="display: none;">
  You can enhance your income while supporting a Charitable Gift Annuity or Charitable Remainder Trust.
</div>
<p>
<strong>
  <a href="javascript:;" onclick="return toggle(document.getElementById('text3'))">
    Gifts that Provide for your Heirs
  </a>
</strong>
<div id="text3" style="display: none;">
  You can pass assets to your family on a tax favorable basis while providing immediate support.
</div>
</p>

Upvotes: 0

Sam
Sam

Reputation: 731

Yes,

<p><strong><a href="javascript:;" onclick="document.getElementById('text1').style.display === 'block' ? document.getElementById('text1').style.display = 'none': document.getElementById('text1').style.display = 'block';">Gifts that Don't Impact your Lifestyle</a></strong></p><div id="text1" style="display:none; margin-top:2px;">There are many ways to give a gift to without impacting your lifestyle.</div>

<p><strong><a href="javascript:;" onclick="document.getElementById('text2').style.display === 'block' ? document.getElementById('text2').style.display = 'none': document.getElementById('text2').style.display = 'block'">Gifts that Increase your Income</a></strong></p><div id="text2" style="display:none;">You can enhance your income while supporting a Charitable Gift Annuity or Charitable Remainder Trust.</div>

<p><strong><a href="javascript:;" onclick="document.getElementById('text3').style.display === 'block' ? document.getElementById('text3').style.display = 'none': document.getElementById('text3').style.display = 'block'">Gifts that Provide for your Heirs</a></strong>
<div id="text3" style="display:none;">You can pass assets to your family on a tax favorable basis while providing immediate support.</div></p>

Upvotes: 1

rodrigovr
rodrigovr

Reputation: 454

Short solution using JQuery:

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

<a href="javascript:;" onclick="$('#text1').toggle();">Gifts that Don't Impact your Lifestyle</a>

Upvotes: 0

Related Questions