CODEWITHSUNDEEP
javascriptjqueryhtmlcsstoggle
user3124264
user3124264

Reputation: 23

Show and Hide a div upon click

Basically, I have an About Me page which will show a summary of the about section, under this will be a button which once clicked I want it to hide the summary part and display the detailed DIV. I currently have the following code which only toggles the detailed section and does not hide the summary section. Thanks:

HTML: 

<div class="row" class="unhidden" id="about_basic">
    <!-- Summary Content Here -->
</div>

<a href="javascript:unhide('about_detailed');" class="btn-large">View Detail</a>
<!-- The Javascript in the href tag needs to unhide the about_detailed section (As it does here) but THEN hide the about_basic section. -->

<div id="about_detailed" class="hidden">
    <!-- Detailed Content Here -->
</div>

Javascript:

<script type="text/javascript">
  function unhide(divID) {
    var item = document.getElementById(divID);
    if (item) {
      item.className=(item.className=='hidden')?'unhidden':'hidden';
    }
  }
</script>

CSS:

.hidden { display: none; }
.unhidden { display: block; }

Upvotes: 2

Views: 340

Answers (2)

cssyphus
cssyphus

Reputation: 40106

First, it is considered poor form to write javascript "inline" (that is, as an attribute of an HTML element). It works, but is difficult to maintain.

Also, jQuery handles this so nicely... There is no need for the unhide function, OR for the hidden/unhidden css classes

jsFiddle Demo

jQuery:

$('.btn-large').click(function() {
    $('#about_basic').toggle();
    $('#about_detailed').toggle();
});

Upvotes: 2

Entoarox
Entoarox

Reputation: 703

changing 

<a href="javascript:unhide('about_detailed');" 
   class="btn-large">
     View Detail
</a>

to 

<a href="javascript:unhide('about_detailed');unhide('about_basic')" 
   class="btn-large">
     View Detail
</a>

will toggle the about_basic section together with the about_detailed section.

Upvotes: 0

Related Questions