CODEWITHSUNDEEP
javascript
user5247236
user5247236

Reputation:

Display hidden div and hide button on click

I have a Javascript function to open a hidden div on click, but I want also to remove / hide the button on click. I know it's possible, but I couldn't figure it out.

<span id="first_related">
    content 1
</span>

<span id="second_related" style="display:none;">
    content 2 hidden / display on click
</span>

<div class="clear"></div>
<div class="btn">
<input id="current_page_viewed_videos" type="hidden">
<input type="hidden" id="related_videos_delta"><a onclick="showDiv()">Show More</a>
</div>

<script type="text/javascript">
    function showDiv() {
       document.getElementById('second_related').style.display = "block";
       document.getElementById('open').style.display = "none";
    }
</script>

Thank you!

Upvotes: 1

Views: 2971

Answers (2)

P.S.
P.S.

Reputation: 16384

Your Javascript is OK, all that you need is just to add <button id="open" onclick="showDiv()">click</button>:

function showDiv() {
  document.getElementById('second_related').style.display = "block";
  document.getElementById('open').style.display = "none";
}
<span id="first_related">
content 1
</span>

<span id="second_related" style="display:none;">
content 2 hidden / display on click
</span>

<button id="open" onclick="showDiv()">click</button>

For updated question:

function showDiv() {
   document.getElementById('second_related').style.display = "block";
   document.getElementById('open').style.display = "none";
}
<span id="first_related">
    content 1
</span>

<span id="second_related" style="display:none;">
    content 2 hidden / display on click
</span>

<div class="clear"></div>
<div class="btn">
<input id="current_page_viewed_videos" type="hidden">
<input type="hidden" id="related_videos_delta"><a id="open" onclick="showDiv()">Show More</a>
</div>

Upvotes: 1

rvberloo
rvberloo

Reputation: 11

using jquery this could be simple. Give you button an id (eg id='mybutton'), then in your code that shows the div add: $('#mybutton').hide()

Upvotes: 0

Related Questions