Forums

Morten

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

SgtLegend

See the following demo i put together

http://jsfiddle.net/wGbh5/

Morten

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

<p class="clickme">Show box</p>
<div class="box"> .....</div>

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

joshuanhibbert

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

SgtLegend

I have updated the fiddle to respect your goal

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

joshuanhibbert

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

kgscott284

@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

joshuanhibbert

Right, thanks for that @kgscott284!

SgtLegend

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.

joshuanhibbert

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

Morten

@joshuanhibbert
thats exactly what I'm looking for ... but I'm using Drupal7 and jQuery 1.4.4

Morten

@SgtLegend
It have to be in jQuery 1.4.4

joshuanhibbert

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

Morten

@joshuanhibbert
so fuc... awesome - tx :-)

joshuanhibbert

No worries :D

SgtLegend

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/

kgscott284

@SgtLegend : Great explanation in that fiddle...and a great example in general, thanks for that clarification.

margaretcollins

I'm trying to create a toggle by following the jsfiddle examples, but it's not working for me. Would someone be able to tell me what I'm doing wrong? I'm new to this. Thanks!

http://jsfiddle.net/margaretcollins/TTbPL/1/

treehouse : what would you like to learn today?

Forums

[Solved] Show / hide div with toggle text - help