Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

jquery help

P

phadam

macrumors regular
Original poster
Jan 21, 2009
123
0
Can someone help me with my jquery script. I'm having some issues and can't see where I went wrong. I have a single page site and I am trying to get the slide toggle effect to start off closed when the page opens and open/close only on click. Right now, when the page opens each section of the slide toggle is already open :/

here is my script so far:

Code: 
<script type="text/javascript">
jQuery(function($) {
    var openText = 'Open';
    var closeText = 'Close';
    $('.item-util .more-toggle').toggle(
        function() {
            $(this).html(closeText);
            $(this).parent().siblings('div').slideToggle('slow');
        },
        function() {
            $(this).html(openText);
            var returnTo = $(this).parents('.item');
            $.scrollTo(returnTo, {offset:{top:-150, left:0}, duration:600});
            $(this).parent().siblings('div').slideToggle('slow');
        }
    );
});
</script>
 
Last edited by a moderator:
Can you post a link to the page so we can see the whole code?

Also, are you getting an errors? If you are using Firefox, go to Tools -> Error Console and then refresh the page. Also, the Firebug add-on/module is invaluable when debugging.
 
I don't have the site up on a server yet, still going through it all. Would a screen cap of the source code help any?
 
Sure, a little. The actual code would be better so I could just copy-and-past and test it here.

Did you look in "Error Console" and see if any errors appeared? Also, what version of jQuery are you loading.
 
Without seeing the rest of the code, I could be wrong, but, try setting the "display" property in your CSS to none for all of the panels you want hidden. Then jquery will show them.

The other issue is that your Jquery can never execute (or it's somehow executing as soon as the DOM is loaded, but there is no document ready call). You don't have any hook for your click in there.

Try something more like this

Code: 
$document.ready(function(){
    $("selector_for_button").click(function(){
        $(".item_util,.more-toggle").slideToggle("slow");
    });
});

That isn't everything, but you can adapt it to your page as needed and it should work.
 
got the page up on it's server for testing http://greasyphotography.com

I think once the page opens correctly with the slide toggle in it's closed state the "open" and "close" options should no longer be backwards, is that correct? or would I have to readjust the script again?

thanks for all the help so far
 
The div "item-alpha tier five first" has an inline style to set display to block. Try changing it to be display: none. Doing that in Chrome Developer Tools worked for me.
 
hmm. Hi c1phr. Thanks for the help so far. I tried to change the display property to none but still got the same issue in safari and haven't tested in firefox or any other browser yet. I was thinking my problem would have been coming from the js script.
 
phadam, c1phr was correct ... your .first and .last classes have their "display" CSS set incorrectly.

Add this to the <head> tag of your page (after all other code in the head) and it seems to work as I understand you'd like it to:

Code: 
<style>
.item-info .first {
	display: none;
}

.item-info .last {
	display: block;
}
</style>

Also note that you have a </style> tagging hanging out in your <head> tag that doesn't need to be there!
 
rfoap said:
phadam, c1phr was correct ... your .first and .last classes have their "display" CSS set incorrectly.

Add this to the <head> tag of your page (after all other code in the head) and it seems to work as I understand you'd like it to:

Code: 
<style>
.item-info .first {
	display: none;
}

.item-info .last {
	display: block;
}
</style>

Also note that you have a </style> tagging hanging out in your <head> tag that doesn't need to be there!
Click to expand...

It's advisable to keep stylesheet code isolated, in a separate .CSS file...
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back