Simple jquery toggle help...?

JavaScript
1

I’m struggling to find a tutorial for this and wondered if anyone could help?

I’m after something like what appears on this site, the comments box.

The comments box toggles show and hide, with the plus and minus changing.

With the comments title remaining there also.

It appears below i would need my box to appear above the toggle switch.

I’ve found lots of toggle tuts but none that have an image which changes letting you know what state your in and has some annoying animation when all i want is to appear and disappear, like the above.

Does anyone know of any tutorials which might help me?

I’m not a whizz with js at all, css man…

Many thanks for any help :slight_smile:

2

Thanks :slight_smile:

I’ll give that a go and see how i get on.

Cheers :slight_smile:

3

Perfect thankyou :slight_smile:

4

It can be done, but you shouldn’t do it!
Those who have a browser that is not capable of javascript / have javascript disabled, will never ever see the information!
The better way would be to let the javascript hide the information and then use the javascript to toggle it.
People with javascript disabled will always see the information, but that’s a good thing, because otherwise they would never see it.
In other words, add $(“#showHideButton”).hide(); as the first line in the $(document).ready() function.

And yes, you would then have to change

  • is(“:hidden”) to is(“:visible”)
  • show() to hide()
  • hide() to show().

P.S. this technique of initially showing everything and then manipulating the the DOM to give users with javascript enabled a different experience is called progressive enhancement, might want to google it :slight_smile:

5

Thanks for help. :slight_smile:

I’ve been playing around and i need the above simple show hide script to be hidden on the initial page load rather than open.

So the page loads with an info button there, you then click to show the info; rather than the info being there straight away…

Can that be done?

Change the :visible to :hidden or something?

6

In case it helps someone else, there are some nice jQuery tree list plugins that automate much of the process, such as:

http://jquery.bassistance.de/treeview/demo/

jQuery are also working on an official jQueryUI tree plugin that will be available at some later date too.

7

ah you need to hide #commentBox initially, not #showHideButton.


<script type="text/javascript">
$(document).ready( function() {
  $("#commentBox").hide();
  $("#showHideButton").click( function() {
    if ($("#commentBox").is(":hidden")) {
      $("#commentBox").show();
      $("#showHideButton").html('<img src="plus.gif" alt="Show" /> Show');
    } else {
      $("#commentBox").hide();
      $("#showHideButton").html('<img src="minus.gif" alt="Hide" /> Show');
    }
  });
});
</script>
8

What the code now states is “if the block is hidden, hide it, otherwise (if it’s not hidden, viz visible) show it”. Now that doesn’t do anything, does it?

You should use:

$(document).ready( function() {
$("#showHideButton").hide();
  $("#showHideButton").click( function() {
    if ($("#commentBox").is(":hidden")) {
      $("#commentBox").show();
      $("#showHideButton").html('<img src="plus.gif" alt="Show" /> Show');
    } else {
      $("#commentBox").hide();
      $("#showHideButton").html('<img src="hide.gif" alt="Hide" /> Show');
    }
  });

which says
“if the block is hidden, show it, otherwise (if it’s not hidden, viz visible) hide it”.

9

Not having much luck :frowning:

I’ve added your code and now i get no + or - and just the contents of the hidden box, not button to click.

Have i inputed it wrong or something…

<script type="text/javascript">
$(document).ready( function() {
$("#showHideButton").hide();
  $("#showHideButton").click( function() {
    if ($("#commentBox").is(":hidden")) {
      $("#commentBox").show();
      $("#showHideButton").html('<img src="plus.gif" alt="Show" /> Show');
    } else {
      $("#commentBox").hide();
      $("#showHideButton").html('<img src="minus.gif" alt="Hide" /> Show');
    }
  });
});
</script>

<div class="col-box">
 <div id="commentBox">
  Hidden content to show or hide...
</div>
<div class="show-hide">
  <a id="showHideButton"><img src="plus.gif" alt="Show" /> Show</a>
</div>
   
</div>
10

So the code would be like this, or completely wrong…?

$(document).ready( function() {
$("#showHideButton").hide();
  $("#showHideButton").click( function() {
    if ($("#commentBox").is(":hidden")) {
      $("#commentBox").hide();
      $("#showHideButton").html('<img src="plus.gif" alt="Show" /> Show');
    } else {
      $("#commentBox").show();
      $("#showHideButton").html('<img src="hide.gif" alt="Hide" /> Show');
    }
  });

Thanks for your help :slight_smile:

11

The general outline would be:


$("#showHideButton").click( function() {
  if ($("#commentBox").is(":visible")) {
    $("#commentBox").hide();
    $("#showHideButton").html('<img src="plus.gif" alt="Show" /> Show');
  } else {
    $("#commentBox").show();
    $("#showHideButton").html('<img src="hide.gif" alt="Hide" /> Show');
  }
});

Alternatively you could put both images in the DOM, initially hide the minus image, and toggle the images.

12

Would i put that at the top of the page before or after the body, would i need to include jquery at the top also?

How about the html, just two boxes commentBox and the button?

13

Yes, you do need jQuery

You can either put at the script at the top, like so


$(document).ready( function() {
  $("#showHideButton").click( function() {
    if ($("#commentBox").is(":visible")) {
      $("#commentBox").hide();
      $("#showHideButton").html('<img src="plus.gif" alt="Show" /> Show');
    } else {
      $("#commentBox").show();
      $("#showHideButton").html('<img src="hide.gif" alt="Hide" /> Show');
    }
  });
});

Or just before the </body>, or create an external .js file with the script above in it, and include that in the page.

This script indeed assumes there is an element with id commentBox that needs to be shown/hidden and an element with id showHideButton which is the button that shows/hides commentBox.

14

Thanks i’ll give it ago :slight_smile:

15

I’ve given it a go and it seems to work, but only if i put something with the link as so…

 <div id="commentBox">
       Hidden content to show or hide...
    </div>
    <div class="show-hide">
       <a id="showHideButton">test</a>
    </div>

If i dont have the test text nothing shows up to click.

Once i click on the test the images appears and work fine :slight_smile:

How would i add to the js so that either the box is open on initial page load or if need be closed?

Can that be done…?

16

Correct, the javascript doesn’t initialize the button. You should do it like so:


<div id="commentBox">
  Hidden content to show or hide...
</div>
<div class="show-hide">
  <a id="showHideButton"><img src="plus.gif" alt="Show" /> Show</a>
</div>

That is something you would need to do in a scripting language like PHP.