Troggle script only on child div

1,613 Posts

fourroses666 Reply #1, 12 years ago

I have a troggle question I don't know how to solve, maybe someone with more js skills knows how to solve.

The troggle works but it works on all divs with the same class.
It needs to work on the child class to not troggle all. (every holder is a resourse)
Also I need to show nothing when I click on an other link as well but thats less important.

Made a fiddle to make things clear:
http://jsfiddle.net/fourroses666/vfyr1z0v/7/

This question has been answered by multiple community members. See the first response.

Evolution user, I like the back-end speed and simplicity

5,888 Posts

Bruno17 Reply #2, 12 years ago

try

$('.i-btn-more').click(function(){
    var el = $(this).parent();
    el.find('.i-more').toggleClass('shown').toggleClass('hidden');
});

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

11 Posts

impcyber Reply #3, 12 years ago

Or slightly shorter:

$('.i-btn-more').on('click', function(){
    $(this).siblings('.i-more').toggleClass('shown hidden');
});

☆ A M B ☆
1,031 Posts

Jako Reply #4, 12 years ago

Quote from: [email protected] at Oct 10, 2014, 07:23 AM

Or slightly shorter:

Not at all, since $(this) has no siblings with class '.i-more' and there are two '.i-more' elements in different DOM trees. Slightly modified to

$('.i-btn-more').on('click', function () {
    $(this).parents('.i-holder').find('.i-more').toggleClass('shown hidden');
});

1,613 Posts

fourroses666 Reply #5, 12 years ago

@Bruno and Impcyber, the thumbs have to slide open as well.
The code Jako gave works like a charm. laugh

Thanks for your time!

Any chance to let the "Show less" button work as well?

<a href="javascript();" class="less">Show less</a>

http://jsfiddle.net/fourroses666/vfyr1z0v/10/

Evolution user, I like the back-end speed and simplicity

discuss.answer

☆ A M B ☆
1,031 Posts

Jako Reply #6, 12 years ago

You could have clicked on .i-btn-more – that toggles the class from shown to hidden and back again …

But the other way is possible too:

$('.i-btn-more, .i-btn-less').on('click', function (e) {
    e.preventDefault();
    $(this).parents('.i-holder').find('.i-more').toggleClass('shown hidden');
});

with <a href="#" class="i-btn-less">Show less</a> - see http://jsfiddle.net/57ejoec4/

discuss.answer

11 Posts

impcyber Reply #7, 12 years ago

If there are many such blocks, you may try this:

;(function() {
	
	'use strict';

	$(function() {
		var $containers = $('.i-holder');

		$containers.each(function() {
			var $container = $(this),
				$more = $container.find('.i-more'),
				$handlers = $container.find('.i-btn-more, .i-btn-less');

			$handlers.on('click', function() {
				$more.toggleClass('shown hidden');
				e.preventDefault();
			});
		});
	});

})(jQuery);

☆ A M B ☆
1,031 Posts

Jako Reply #8, 12 years ago

Looks nice!

1,613 Posts

fourroses666 Reply #9, 12 years ago

Thanks allot guys, looks like there are many ways to Rome wink

Evolution user, I like the back-end speed and simplicity

Answered Troggle script only on child div