CSS-Javascript: Show and Hide div

Question

I want to create a menu where there is just title and a view more link is provided. If that link is clicked it should open a hidden div and that view more should change to show less or close. And if I click that the div should close again. So far I have this.

Title 1 <a href="#" onclick="showdiv()">View More</a>
<div id="title1_div">
Some Information
</div>

<style>
#title1_div{
display:none;
}
</style>

<script>
function showdiv()
{
document.getElementById('title1_div').style.display = 'block';
}
</script>

This only provides the on click show division. How can I close that div on clicking.

Any help would be appreciated.

Please see this example at JSFiddle: https://jsfiddle.net/eo4cysec/

You do the opposite of what you did

Patrick Evans
– Patrick Evans

2016-07-21 03:11:00 +00:00
Commented Jul 21, 2016 at 3:11 — Patrick Evans
– Patrick Evans, Commented Jul 21, 2016 at 3:11

ScientiaEtVeritas · Accepted Answer · 2016-07-21 03:31:52Z

1

You just check if the property is set to block, if so you set it to none, else you set it to block. So you have a toggling logic in it.

if(document.getElementById('title1').style.display == 'block') {
   document.getElementById('title1').style.display = 'none';
} else {
   document.getElementById('title1').style.display = 'block';
}

To set the text to View Less you need the reference of the clicked tag, you pass it as parameter like this:

<a href="#" onclick="showdiv(this)">View More</a>

Then you have the chance to use this parameter and set the innerHTML of it, which is the text that is displayed. So the final function will look like this, where e is now the reference on the a-tag:

function showdiv(e) {
  if(document.getElementById('title1').style.display == 'block') {
     e.innerHTML = 'View More';
     document.getElementById('title1').style.display = 'none';
  } else {
     e.innerHTML = 'View Less';
     document.getElementById('title1').style.display = 'block';
  }
}

Please check out this fiddle:

https://jsfiddle.net/g7ry88h7/

edited Jul 21, 2016 at 3:31

answered Jul 21, 2016 at 3:20

ScientiaEtVeritas

5,3184 gold badges47 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pugazh Over a year ago

Missed to change the anchor's text from "View More" to "Show Less" or "Close".

Sami · Accepted Answer · 2016-07-21 03:21:36Z

1

Simple function. Call it on click and it'll handle the hide/show:

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

answered Jul 21, 2016 at 3:21

Sami

3,8204 gold badges19 silver badges30 bronze badges

1 Comment

Pugazh Over a year ago

Missed to change the anchor's text from "View More" to "Show Less" or "Close".

Pugazh · Accepted Answer · 2016-07-21 03:22:23Z

1

Here is a working example.

function showdiv(el) {
  if (el.innerHTML == "View More") {
    document.getElementById('title1').style.display = 'block';
    el.innerHTML = "Show Less";
  } else {
    document.getElementById('title1').style.display = 'none';
    el.innerHTML = "View More";
  }
}

#title1 {
  display: none;
}

Title 1
<div id="title1">
  Some Information
</div>
<a href="#" onclick="showdiv(this)">View More</a>

answered Jul 21, 2016 at 3:22

Pugazh

9,5715 gold badges36 silver badges56 bronze badges

Comments

Wim Mertens · Accepted Answer · 2016-07-21 03:17:33Z

0

$('a').click(function () {  
  $(this).next('div').stop(true, true).slideToggle("fast");

if($(this).html() == 'View More'){
       $(this).html('View Less');
   } else {
       $(this).html('View More');
   }
}),

answered Jul 21, 2016 at 3:17

Wim Mertens

1,7903 gold badges20 silver badges31 bronze badges

3 Comments

ScientiaEtVeritas Over a year ago

I don't think he's using jQuery, so... there's also no jQuery in the tags.

Pugazh Over a year ago

It's good to see your answer. Maybe mention that "A solution using jQuery", OP haven't included jQuery tag.

Wim Mertens Over a year ago

Sorry, yes I should have mentioned this is a jQuery solution.

Collectives™ on Stack Overflow

CSS-Javascript: Show and Hide div

4 Answers 4

1 Comment

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related