?
Solved

Need to add functionality to open first collapsible div by default

Posted on 2012-08-20
17
Medium Priority
?
402 Views
Last Modified: 2012-08-29
The script below toggles divs up and down on a click event. However I need to modify it by leaving the first tab open by default. Any help would be great.

TST.Expander = {

    initialize: function () {
        TST.Expander.vert();
    },

    vert: function () {
        var listing = $$('.details'),
            headlines = $$('.open'),                        
            siteDetails = $$('.title'),
            collapsibles = new Array();

        headlines.each(function (heading, i) {
            var collapsible = new Fx.Slide(listing[i], {
                duration: 500,
                transition: Fx.Transitions.linear,
                onComplete: function (request) {
                    var open = request.getStyle('margin-top').toInt();
                    if (open >= 0) new Fx.Scroll(window).toElement(siteDetails[i]);
                }
            });

            collapsibles[i] = collapsible;

            heading.addEvent('click', function () {
                var getHeadlines = headlines[i].get('text');
                if (getHeadlines == 'View Content') {
                    this.set('text', 'Close Content');
                } else {
                    this.set('text', 'View Content');
                }

                this.toggleClass('collapseBtn');
                collapsible.toggle();
                return false;
            });
            collapsible.hide();
        });
    }
};


$( window )
	.addEvent( 'domready', function() { TST.Expander.initialize(); });

Open in new window

0
Comment
Question by:yando18
17 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 38316658
Is this ext.js?
Can't you just click it using $$("whatever").click();
?
0
 

Author Comment

by:yando18
ID: 38316759
It is an external js file and yes the click opens the div and closes as well. However I need to add functionality to keep the first option open when the page loads by default. Can a div be targeted by class or id to remain open, while the others are closed?
0
 
LVL 17

Assisted Solution

by:jrm213jrm213
jrm213jrm213 earned 1000 total points
ID: 38317098
hi,

In your code about at line 37
wrap that in an if statement that ignores the first item.

TST.Expander = {

    initialize: function () {
        TST.Expander.vert();
    },

    vert: function () {
        var listing = $$('.details'),
            headlines = $$('.open'),                        
            siteDetails = $$('.title'),
            collapsibles = new Array();

        headlines.each(function (heading, i) {
            var collapsible = new Fx.Slide(listing[i], {
                duration: 500,
                transition: Fx.Transitions.linear,
                onComplete: function (request) {
                    var open = request.getStyle('margin-top').toInt();
                    if (open >= 0) new Fx.Scroll(window).toElement(siteDetails[i]);
                }
            });

            collapsibles[i] = collapsible;

            heading.addEvent('click', function () {
                var getHeadlines = headlines[i].get('text');
                if (getHeadlines == 'View Content') {
                    this.set('text', 'Close Content');
                } else {
                    this.set('text', 'View Content');
                }

                this.toggleClass('collapseBtn');
                collapsible.toggle();
                return false;
            });
            if(i > 0)
            {
                collapsible.hide();
             }
        });
    }
};


$( window )
	.addEvent( 'domready', function() { TST.Expander.initialize(); });

Open in new window

0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 1000 total points
ID: 38318421
To get the div to be open on load you could add a trigger in the init function::

$$("#divId").trigger("click");
0
 

Assisted Solution

by:yando18
yando18 earned 0 total points
ID: 38322887
This works:

$$("#divId").trigger("click");

However I need to stop the FX.Transitions as well. Thanks so much.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38323245
you could also force the css for your div in the init function. But I'm not sure which property is being animated - I would need to see the rest of your code.

so you could set the property to whatever it needs to be when it's open, for example:

$$("#divId").setStyle(property, value);

(you're using mootools right?)

I'm not sure if this will work. If you could post a link to your page it would be easier to test...

cheers.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38323256
did the solution in post ID: 38317098 not work? that seems like it should have done the trick..
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38323262
the other thing you could try is right after this line:

collapsible.hide();

add:

$$("#divId").show();
0
 

Author Comment

by:yando18
ID: 38325681
Yes this works however I need to stop this from happening once that specific event is fired.

new Fx.Scroll(window).toElement(planDetails[i]);

Open in new window


That scroll down to the position of planDetails. I think I need to do something like this:

onComplete: function (request) {
                    var open = request.getStyle('margin-top').toInt();
                    if ($$('#defaulter').length > 0) {
                        console.log('true');
                        return false;
                    } else if (open >= 0){
                        new Fx.Scroll(window).toElement(planDetails[i]);
                        console.log('false');
                    }
                }

Open in new window

0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38326251
If you can post post a link to the page, it'll be a lot easier to troubleshoot.
0
 

Author Comment

by:yando18
ID: 38326343
This is where I got some of the code from you can see the slide effect.

http://pr0digy.com/sandbox/mootools/slide-effect/
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38326522
this might sound like a pain in the neck, but the best way to get this working is by looking at your actual page. Please either post a link, or the page code in its entirety.
0
 

Author Comment

by:yando18
ID: 38326767
I wish I had a link to share. Any way to check if a click event was fired from $$('#defaulter') then skip the FX.scroll or set the Scroll to false?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38327055
Not really.

The way the function is written, it collapses all the elements in one fell swoop. It should really be rewritten differently to do what you need, otherwise we're just crudely hacking it.

I'll have another look at it tonight if I get time - maybe write a different function.
0
 

Author Comment

by:yando18
ID: 38327061
Thanks so much for all your help.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38327387
Hi yando18,

It looks like the solution from jrm213jrm213 does indeed work - it is by far the cleanest.

see working example here:
http://candpgeneration.com/EE/show-hide.html

make sure your html structure and css is in order, and you're identifying the various elements correctly.

Beyond that, I really need to see your page if it still doesn't work.
0
 

Author Closing Comment

by:yando18
ID: 38344731
Thanks for the help on this, I ended up writing a new function that treats the top option open by default.
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question