Post discussion

# JS Toggle Boxes

Posted: Jul 25, 2005, under WordPress, DHTML. Add a comment!

This WordPress plugin reduces clutter by placing on/off JavaScript toggles on the page elements of your choice.

You can add a comment:
Identify yourself here, or login.

(only seen by admins)
(optional) if you want people to visit


Smilies: (click to append)

35 comments

RSS2 feed for this discussion.

  1. Posted by Word, on October 27, 2005, 05:28.

    I have used this and am very happy with it however, if you could use images for a + sign and which would turn into an image of a - sign after it's clicked on that would be really nice.

  2. Posted by Skippy, on October 28, 2005, 14:35.

    Word: I will consider it. It can definitely be done, it’s just a matter of implementing it in such a way that users of the plugin can easily choose between images or text. And that may be more complicated than it’s worth.

  3. Posted by Joe, on December 19, 2005, 21:32.

    Hi,
    Nice plugin but I was wondering if it is possible to get it to hide a post ? For example

    Post 1 [+/-]

    Post 2 [+/-]

    Post 3 [+/-]

    Can this script hide 1 post and leave the rest ? Or can someone tell me anything about hideing the posts the whole thing exept the tile? I would do the more tag exept I like this better

  4. Posted by Skippy, on December 20, 2005, 12:45.

    Joe: Yes, it is definitely possible. Take for instance this bit of code, which can be found in index.php in the default WordPress 1.5 theme:

    <?php while (have_posts()) : the_post(); ?>
      <div class="post" id="post-<?php the_ID(); ?>">
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
        <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
        <div class="entry">
          <?php the_content('Read the rest of this entry &raquo;'); ?>
        </div>
        <p class="postmetadata">Posted in <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Edit','','<strong>|</strong>'); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
      </div>
    <?php endwhile; ?>

    Here's what you do to apply toggle boxes to all the posts:

    <?php while (have_posts()) : the_post(); ?>
      <div class="post" id="post-<?php the_ID(); ?>">
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
        <small><?=function_exists('JSTB_box_toggle')? JSTB_box_toggle('[Show/hide post]', 'toggle', 'Click to toggle', 'cookie_post_'.$post->ID, 'post_block_'.$post->ID) :''?> <?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
        <div id="post_block_<?=$post->ID?>">
        <div class="entry">
          <?php the_content('Read the rest of this entry &raquo;'); ?>
        </div>
        </div>
        <?=function_exists('JSTB_box_init')? JSTB_box_init('cookie_post_'.$post->ID, 'JSTB_hidden', 'post_block_'.$post->ID) :''?>
        <p class="postmetadata">Posted in <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Edit','','<strong>|</strong>'); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
      </div>
    <?php endwhile; ?>

    Explanation:
    * I've used $post->ID to create unique cookie and box names for each post.
    * I've used JSTB_box_toggle() to make a toggle link for each post and I've placed it in the <small></small> section.
    * I've enclosed the main body of each post in yet another <div>, which I've granted an unique id based on $post->ID.
    * I called JSTB_box_init() to activate the box.

  5. Posted by Joe, on December 22, 2005, 02:33.

    Hi,
    Thanks.
    Um, Wordpress 2.0 is comming out in the next few days and do you know if it's going to be compatible? Because I still want to use it. Thanks…

  6. Posted by Skippy, on December 22, 2005, 10:02.

    I have no idea yet, sorry. I've been waiting for 2.0 stable to come out before I release my plugins for it. But this plugin is mainly JavaScript so I should be able to port it quickly.

  7. Posted by Ben, on December 26, 2005, 01:38.

    I currently run WP 2.0 RC3 and this does work for it, so I imagine it would have no problem in the official release. I like this very much, and I would love to have the image functoinality as mentioned above.

    For now, instead of having it be so complicated, I was wondering if I could insert an image as the button without the changing images. I just want one static image, if that makes sense. For some reason I am not able to insert an image to replace the text, and I don't know why.

  8. Posted by Skippy, on December 26, 2005, 19:28.

    Ben: Thanks, it's good to know it will work for WP 2.0 too. About the image problem, the reason is line 186 in the plugin file:

    $text = addslashes(htmlspecialchars($text));

    htmlspecialchars() replaces all HTML tag characters with their "inactive" versions, which means you can't use an <img> tag as the text, when you use JSTB_box_toggle(). This is good, in general, but perhaps I will have to revert certain characters, such as "less then" and "greater then".

    The workaround is to change that line to look like this:

    $text = addslashes($text);
  9. Posted by Joe, on December 29, 2005, 16:32.

    Hi,
    Well there's a 99 % chance that it works with 2.0 Stable but the reason that I'm saying that is because my theme crashed so I have to redo it… But i did activate it and it worked

  10. Posted by Joe, on January 18, 2006, 05:35.

    Hi,
    I was trying to get the switch working but I can't get it to work well. What happenes its when I got it mostly working it killed the rest of the menu but switched after I tryed to fix it the switch stoped working… Here's the code :

        <div class="leftsideSection">
          <ul>
            <li><a href="<?php echo get_settings('siteurl') ?>" title="Blog Home">Blog Home</a></li>
            <?php aranea_wp_register(); ?>
            <li><?php aranea_wp_loginout(); ?></li>
    <li><a href="http://blog.fileville.net/old_blog/">Old Blog</a></li>
          </ul>
        </div>

    This is the stuff that shows after it's switched : <?php aranea_wp_list_pages('title_li='); ?> Thanks…. :roll:

  11. Posted by Skippy, on January 18, 2006, 14:29.

    Joe: I've taken a look at your blog and the switches work, so I don't know what the problem is. Anyway, it's highly unlikely that this plugin did what you described. It has no way of changing the HTML on the page (or the PHP, for that matter). When it works, it hides some stuff from the visitors, but if you look at the page source it's the same all the time. It's JavaScript, working on the client side.

  12. Posted by Joe, on January 19, 2006, 01:24.

    I took it off but tell me and I'll put it back on, you'll see the left menu partly gone… If it does work you see a title saying Categories and Archives… Thanks…

  13. Posted by Skippy, on January 19, 2006, 09:55.

    Joe: Well put it back on when you get a chance, not much I can do without an actual example. :)

  14. Posted by Joe, on January 22, 2006, 05:56.

    ? ? ?
    Well, odd. But what happened is I used a CSS tag that was already used by the side bar and that's why it broke (theme dev told me) and after that I put the div around it and it worked so sorry, and thanks… :smile:

  15. Posted by Lance Brown, on February 9, 2006, 06:50.

    I just wanted to say this is a great tool/plugin. Thanks! You can see it in use in three places in the sidebar here: http://projectsimplify.com

    No complaints, no errors, no request for more…just a thank you.

    :cool:

  16. Posted by Skippy, on February 9, 2006, 14:34.

    Lance Brown: cool, it's nice to see that people are pleased to use it, thanks for the kind words. :)

  17. Posted by Owen, on August 9, 2006, 04:59.

    This is a very awesome plugin, thank-you very much.

    I have implemented it on my site where possible, however I would also like to be able to make the links categories generated by wp_get_links() or whatever the function is (I can't quite remember the name) for the sidebar to be hide-able as well. Eg if you look at my site owened.net, most things are hide-able except for the categories generated by Wordpress. Where and how would I have to insert this javascript to make them hide-able also?

    Thank-you again!

  18. Posted by Skippy, on August 9, 2006, 20:44.

    Owen, see my blog post about this issue, under Known Issues. Ask again if you get into trouble.

  19. Posted by RalfS, on February 5, 2007, 10:18.

    Implementing JS Toggle Boxes for the widgets + widget works plugins

    This JS Toggle Boxes is a very useful feature. I'm currently trying to insert it in widgets.php The link lists are causing some trouble, though. I can see all the relevant ids and classes and all in page source, but it seems as if the function calls to JSTB_box_toggle and JSTB_box_init would never be carried out. The [+/-] never appear. I have never written php/js before, so I would very much appreciate some help. I have places the required function call to my themes header.php

    CODE:

    function widget_links($args) {
      global $wpdb;
    
      echo "";
      $link_cats = $wpdb-&gt;get_results("SELECT cat_id, cat_name FROM $wpdb-&gt;linkcategories");
      foreach ($link_cats as $link_cat) {
              $cat_id = $link_cat-&gt;cat_id;
              echo '';
              echo ''.$link_cat-&gt;cat_name.'';
    
              function_exists('JSTB_box_toggle')? JSTB_box_toggle('[+/-]', 'toggle', 'Click to toggle', 'cookie_link_' . $cat_id, 'link_list_' . $cat_id) :'';
    
              echo '';
              wp_get_links($link_cat-&gt;cat_id);
              echo "";
    
              function_exists('JSTB_box_init')? JSTB_box_init('cookie_link_'.$cat_id, 'JSTB_shown', 'link_list_'.$cat_id) :'';
              echo "";
              }
      echo "";
    }

    I even tried adding one
    above the first function_exists call, and I did not see any text in the page/source. This test (and toggle) works with categories and archives, but not with link lists…

    Any ideas of what could be wrong?

  20. Posted by RalfS, on February 5, 2007, 10:30.

    Ok, can you take those two comments away and tell me how to submit html code so that all the tags remain visible?

  21. Posted by Skippy, on February 5, 2007, 18:48.

    Sorry, RalfS, my BBCode plugin is still in alpha testing. :neutral: But I got the idea, you're trying the example I gave under "Known issues", except you're doing it in a function.

    Does your code work when outside the function? If so, perhaps you're not getting a variable you need from the global space. I'm afraid some/many of the WP builtin functions rely on "seeing" stuff from the global namespace, which is why you need to take extra care when you go into a deeper function yourself. And since you say you're not that familiar with PHP, it'd be kind of hard for me to give you a "magic" one liner solution, even if there is one.

  22. Posted by RalfS, on February 8, 2007, 00:58.

    I managed to get JS Toggle Boxes to work from inside the links display function of widgets.php. I have posted the code to the WordPress support plugins forum. Tags: "JS Toggle Boxes", expand, collapse, widgets, sidebar… The confusing part was to understand what should actually be insize tags and what outside, and what to echo… I managed to get it working though. My example contains unnecessary parts, too (the before_widget, after_widget, and the outermost UL LI /UL are unnecessary in my opinion).

    You have created a truly magnificient enhancement to WP.
    Thanks!

  23. Posted by Skippy, on February 9, 2007, 00:45.

    Thanks, RalfS, I'm very glad you got it working (and helped others in the process too. :))

  24. Posted by Skippy, on April 6, 2007, 15:46.

    Zoran: yes, it could definitely be used for this. But it depends a lot of the internal workings of your WP theme, and you'd probably have to be failry good at CSS+JS and WP theming/PHP.

    The first question is how you plan to isolate the two language versions. You need HTML block elements to contain each version. They could simply be DIV's you enter manually when editing the post (without WYSIWYG), or you could go for a more elaborate / semi-automated solution.

    The second issue is how you intend to lay the blocks and the toggle links on the page. To start with, you probably want the "alternate switch" I'm describing under "neat tricks". It wouldn't hurt to implement the second trick too (use cookies to remember the user's language preference across visits). The toggle link should be placed in an easy to use place (perhaps in a sliding sidebar? :))

    Good luck with it. I lack the time, unfortunately, to get involved, but please let me know if you manage to implement it on your site.

  25. Posted by Anna, on June 1, 2007, 10:05.

    How do I get to keep my links hidden like yours instead of having them listed all over again, until I click on the [+/-] to show them?

    Thanks!

    Your plugin's fab - thank you very much! :cool:

  26. Posted by Skippy, on June 1, 2007, 23:14.

    Anna, it has to do with cookie persistence. Whether a box is hidden or shown is remembered by the browser thanks to cookies. Now, whether those cookies are correctly remembered from one browsing session to another depends on two main issues:

    (a) Whether you chose a unique name for the cookie associated with that particular box ie. there isn't another box with the same cookie name, or a cookie with the same name from another plugin or WP itself. If you have cookie testing tools in your browser you could check for overlaps. If not, just make sure you use a unique enough name.

    (b) Your browser may have a more-restrictive-than-usual cookie retention policy. If, for example, you told it to only keep cookies until you close the browser… it won't remember your choices when you open it again.

  27. Posted by Mark, on June 2, 2007, 22:57.

    Hi. I would like to thank you for this terrific plugin and I'd like to share my experience using it, and suggest something.

    I did quite a bit of user testing - asking people with varying amounts of web savyness to look at my site. When I used the +/- signs, LOTS of my users didn't think there was something there and never clicked on the link. I know what you are thinking because I was surprised to. I click on everything that could be a menu but not everyone is like you and I. The problem is, if you want the most easily understood toggle, my opinion *now* is that you almost certainly have to use a pair of images. My experience with user tests is echoed by Google Analytics overlay statistics - very few people were clicking on the +/- menus.

    After a number of user tests, I came up with the image pair you see on my site. It's located at the top of my right sidebar menu. I've had MUCH better success with people seeing and using those buttons.

    Anyway, just some observations.

    Once again, THANKS! :)

  28. Posted by Skippy, on June 3, 2007, 18:47.

    Thank you too, Mark, that's valuable insight. I've been using images too on another site of mine but haven't seen so much of a difference. It's probably because they both address more tech-savvy people, but I'll definitely keep it mind for more "mainstream" websites.

  29. Posted by RalfS, on June 11, 2007, 15:29.

    I have been using JSTB with WordPress widgets, but now I had to upgrade to WordPress 2.2. The new version has widgets built-in, which I like (for simplicity). It is a bit tough and time consuming though, to find the correct place for JSTB within the WordPress widgets.php Has anyone done this? If yes, then it would be nice to have installation instructions published here. I guess that the sidebar is the most popular spot for JSTB…

  30. Posted by Skippy, on June 11, 2007, 20:14.

    I'll make it a point to update the documentation once I upgrade the plugin to 2.2.

  31. Posted by winsr, on July 26, 2007, 15:08.

    Hi there

    I have been looking at this plugin, and it seems to be just what i need.

    But i need every category to be able to expand and collaps, not the category "box".

    Is that possible, and can anyone guide me a little? I can insert code etc. but im not a developer ;)

    Thanks in advance :)

  32. Posted by Skippy, on July 26, 2007, 15:32.

    winsr, I'm afraid that's next to impossible for a non-programmer. The reason is that the categories are printed by a WordPress internal function. To override what it does, or to mangle the output, or to write a different function that prints the categories with box toggles, those are the alternatives. And none of them is simple. You'd need either strong knowledge of PHP, MySQL and WP (to do the above), or very good skills in JavaScript (to alter the output on the browser side).

    If you really can't live without this, your best choice would be to ask for someone to do this for you, in one of the bigger WP communities –sorry, can't point at any off the top of my head. Or if you really really want it you can pay someone to do it.

  33. Posted by Meowminx, on August 10, 2007, 02:55.

    Sorry to bother you, but I am really struggling to toggle links like you have done on your sidebar. When I tried to, it would only open and close my Food for Thought section and it wouldn't open the WWW section.

    Please help me on what to do!

    Thank you very much.

    :confused: :confused: :confused:

  34. Posted by Benjamin, on August 17, 2007, 18:07.

    Hi there,

    I really like the plugin. I'm trying to use it to toggle information in a static post in WordPress, instead of a sidebar, but when I follow your instructions it refuses to cooperate–nothing happens in the page itself, and when I return to edit the file again most of the code has disappeared. Can you help me? I notice that this comments page does exactly what I need: it toggles static content with "hidden" by default.

    Thanks!

  35. Posted by Skippy, on August 19, 2007, 23:35.

    meowminx, make sure you use a proper id in the HTML element you want to toggle and in the call to JSTB_box_toggle() (the last parameter). What probably happens is that you're using the name of a previous element twice, so more than one toggle switch will make the same element react, while the one you want will stay still.

    Benjamin, I'm not doing anything special. Whether you use this in sidebar.php or in a static.php page it's the same. Just pay attention to the function parameters and such, one simple spelling error can mess everything up, especially if it's the id of the target HTML element.

Jump to comment box