Grow your CSS skills. Land your dream job.

Show / hide div with toggle text – help

  • # August 12, 2012 at 6:57 am

    Hi I’m trying to code at simple show/hide div like


    $(".box").hide();
    $(".clickme").show();

    $('.clickme').click(function(){
    $(".box").slideUp();
    _parent = $(this).parent();
    _elm = $(_parent).find(".box");
    if($(_elm).css('display')=="none"){
    $(_elm).slideToggle();
    }
    });

    This is working fine. But I would like to toggle the “clickme text”
    Something like this: http://css-tricks.com/snippets/jquery/toggle-text/

    But I can’t code it right …

    # August 12, 2012 at 7:54 am

    See the following demo i put together

    http://jsfiddle.net/wGbh5/

    # August 12, 2012 at 8:58 am

    Hi SgtLegend
    In your demo I see two click text.
    My goal is something like this:

    Show box


    .....

    If I see the content in the “box” the click-text will be “Hide box”

    # August 12, 2012 at 7:35 pm

    Is this what you are after? http://jsfiddle.net/joshnh/Drrkb/

    # August 12, 2012 at 11:07 pm

    I have updated the fiddle to respect your goal

    http://jsfiddle.net/wGbh5/1/

    # August 12, 2012 at 11:23 pm

    @SgtLegend Any reason you are using the each method instead of caching the elements as a variable? I don’t know that much about jQuery, so it is probably something simple.

    # August 12, 2012 at 11:46 pm

    @johsuanhibbert – I am not that advanced either so i thought this was a good spot to jump in…My take on it, is that since it is really only being referenced once (not making multiple similar requests to the DOM) then it really doesn’t matter…hard to explain my thoughts without a really long winded response… EDIT: I spoke with my cousin’s husband who is far more advanced than myself, and he agrees, but says perhaps your version may be a bit more readable than @SgtLegend ‘s

    I suppose for sake of simplicity, not using ternary might make it a little more readable for anyone who doesn’t yet understand it though too ;P

    # August 13, 2012 at 12:21 am

    Right, thanks for that @kgscott284!

    # August 13, 2012 at 12:40 am

    The $.each method simply allows for more flexibility and more maintainable code, personally i always choose it over calling a collection of elements unless its very simple like:

    $('element').on('click', function() {
    $('input:checkbox').attr('checked', function() {
    return !$(this).is(':checked');
    });
    });

    In this case calling the $.each method would be a waste since we can do a simple evaluation of the :checked status on the checkboxes, the same concept applies to the box toggle code.

    # August 13, 2012 at 12:51 am

    @SgtLegend Would you mind explaining how it allows for more flexible and maintainable code?

    # August 13, 2012 at 3:40 am

    @joshuanhibbert
    thats exactly what I’m looking for … but I’m using Drupal7 and jQuery 1.4.4

    # August 13, 2012 at 3:47 am

    @SgtLegend
    It have to be in jQuery 1.4.4

    # August 13, 2012 at 7:49 am

    Ah, right, here it is for 1.4.4: http://jsfiddle.net/joshnh/Drrkb/

    # August 13, 2012 at 8:06 am

    @joshuanhibbert
    so fuc… awesome – tx :-)

    # August 13, 2012 at 9:39 am

    No worries :D

Viewing 15 posts - 1 through 15 (of 18 total)

The topic ‘Show / hide div with toggle text – help’ is closed to new replies.

*May or may not contain any actual "CSS" or "Tricks".