SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Simple jquery toggle help...?

    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

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,892
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    The general outline would be:

    Code JavaScript:
    $("#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.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,892
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    Yes, you do need jQuery

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

    Code JavaScript:
    $(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.

  5. #5
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks i'll give it ago

  6. #6
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've given it a go and it seems to work, but only if i put something with the link as so...

    HTML Code:
     <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

    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...?

  7. #7
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,892
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Jezthompson12@nt View Post
    I've given it a go and it seems to work, but only if i put something with the link as so...

    HTML Code:
     <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.
    Correct, the javascript doesn't initialize the button. You should do it like so:


    HTML Code:
    <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>
    Quote Originally Posted by Jezthompson12@nt View Post
    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...?
    That is something you would need to do in a scripting language like PHP.

  8. #8
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for help.

    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?

  9. #9
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,892
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Jezthompson12@nt View Post
    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?
    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
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  10. #10
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So the code would be like this, or completely wrong...?

    Code JavaScript:
    $(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

  11. #11
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,892
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Jezthompson12@nt View Post
    So the code would be like this, or completely wrong...?
    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:

    Code 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="hide.gif" alt="Hide" /> Show');
        }
      });

    which says
    "if the block is hidden, show it, otherwise (if it's not hidden, viz visible) hide it".
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  12. #12
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks

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

    Cheers

  13. #13
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not having much luck

    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...
    Code JavaScript:
    <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>

    HTML Code:
    <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>

  14. #14
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    8,892
    Mentioned
    138 Post(s)
    Tagged
    2 Thread(s)
    ah you need to hide #commentBox initially, not #showHideButton.

    Code javascript:
    <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>
    Rémon - Hosting Advisor

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  15. #15
    SitePoint Addict
    Join Date
    Jul 2006
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect thankyou

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •