jQuery toggle and functions

Question

Please take a look at my fiddle: http://jsfiddle.net/wWHz4/

This is what I made so far with my little bit of jQuery knowledge. I want the following:

When I click* on a button of a selected title, the other titles have to fade or toggle* away. Then animate* the selected title to the left (instead of static jumping), then show* the content of that selected title to the front and change* the button name from 'more...' to 'back'. When I click* on back I want the content to fade* away, animate the selected title back to his position* and bring up the other titles back to place*.

Pathik Gandhi · Accepted Answer · 2012-10-11 12:40:39Z

2

Replace this with js code

$('.group .title > div a.button').click(function() {
    if ($(this).parent().siblings().is(":visible")) {
        $(this).text('back');
    } else {
        $(this).text('more');
    }
    $(this).parent().siblings().slideToggle("slow");
    var indexcount = $(this).parent().index() + 1;
    $('.content').find('.columns:nth-child('+indexcount+')').slideToggle("slow");
});

edited Oct 11, 2012 at 12:40

answered Oct 11, 2012 at 12:16

Pathik Gandhi

1,3441 gold badge18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jonathan Over a year ago

Thank you for looking! Maybe I wasn't clear enough, but that content needs to be hidden until a Title is selected. It's part of the Title's content ;-) I want that to fade or toggle in somehow. Put it like this: Select the first div of a Title, show the first div of the Content, second and so on. Would you mind taking a look at that? Thnx!

Pathik Gandhi Over a year ago

i m not clear what you are talking about. but once try this code and then let me know if any issue.

Jonathan Over a year ago

+1! The only last thing now is that it works to static. I want something like this effect using on the Quicksand plugin when selecting a filter type: razorjack.net/quicksand. Or do I want too much now..? Otherwise I'll accept your answer anyways, thnx!

Pathik Gandhi Over a year ago

i can only tell you that i think you can do this with jquery easing effects. i suggest dont use effects for this. the simple slidetoggle is better then other effects.

Jonathan Over a year ago

Thnx for the tip! I'll take a look at it.

Diode · Accepted Answer · 2012-10-11 12:11:43Z

1

To toggle text you can do like this

$('.group .title > div a.button').click(function(){
    $(this).html(($(this).html() == "more...")?"back":"more...");
    $(this).parent().siblings().slideToggle("slow");
    $(this).parent().parent().siblings().slideToggle("slow");
});

Everything else is working in your demo

answered Oct 11, 2012 at 12:11

Diode

25.2k8 gold badges43 silver badges52 bronze badges

Comments

Shubhanshu Mishra · Accepted Answer · 2012-10-11 12:09:46Z

0

You can change the properties of the <a> tags using jquery .html() [ http://api.jquery.com/html/ ] function also you can place a <div> which contains the full text and toggle the state of display of that div from none to block and back to show the full text.

You can have a look at the accordian code using jquery which does something similar to what you want: http://jqueryui.com/accordion/

answered Oct 11, 2012 at 12:09

Shubhanshu Mishra

6,7506 gold badges25 silver badges24 bronze badges

Comments

Jonathan · Accepted Answer · 2012-10-24 14:08:20Z

0

I got it working like how I wanted it to be:

$('.group .title > div a.button').click(function() {

    var self = this;
    var speed = 500;
    var indexcount = $(self).parent().index() + 1;
    var subcontent = $('.content').find('.columns:nth-child(' + indexcount + ')');

    if ($(self).parent().siblings().is(":visible")) {
        $(self).text('back');
        $(self).parent().siblings().toggle(speed);
        subcontent.delay(speed).toggle("slide", speed);

    } else {
        $(self).text('more');
        subcontent.toggle("slide", speed, function() {
            $(self).parent().siblings().toggle(speed);
        });

    }

});

See fiddle: http://jsfiddle.net/wWHz4/

answered Oct 24, 2012 at 14:08

Jonathan

6518 silver badges23 bronze badges

Collectives™ on Stack Overflow

jQuery toggle and functions

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related