Forums

Give help. Get 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 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

    # August 27, 2012 at 5:14 am

    I know it’s been a while since my last post which probably seems fishy but I have just been busy, to see what i mean by my above comments see the following jsFiddle which has a built in feature that allows the boxes to open by default.

    http://jsfiddle.net/wGbh5/4/

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

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

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag