dmei4 Posted September 22, 2010 Share Posted September 22, 2010 HiI made a toggle function, but I wanted the first element to show on load. I'm new with jQuery and I'm trying variations using :first, I saw it on a tutorial that I can not find again. :/ any help would be appreciated, I'm still new at this.I'm going to add a link to my code and files.Page Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted September 22, 2010 Share Posted September 22, 2010 If you were refering to this: $(".content div:first").show (); it would just be $("div.content:first") Because content is an element of the div not the other way around Link to comment Share on other sites More sharing options...
dmei4 Posted September 22, 2010 Author Share Posted September 22, 2010 $("div.content:first").show(); should the line be this? It's not working. Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted September 22, 2010 Share Posted September 22, 2010 yes it should be $("div.content:first").show(); That is the only obvious problem I can see Link to comment Share on other sites More sharing options...
dmei4 Posted September 22, 2010 Author Share Posted September 22, 2010 yes it should be $("div.content:first").show(); That is the only obvious problem I can see:/ Do you know why it wouldn't be showing? Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted September 22, 2010 Share Posted September 22, 2010 I do not know what is wrong with it but and alternitive method to what you are doing which might work is .css("display","block") when you click and .css("display","none") when you click again and use css to set the first one to display:block at the start. Link to comment Share on other sites More sharing options...
dmei4 Posted September 22, 2010 Author Share Posted September 22, 2010 How would that look? I'm sorry, I just started like 2 days ago and I'm not familiar with a lot of the selectors or how to combine them for a desire effect. Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted September 22, 2010 Share Posted September 22, 2010 This should work as a basic example: <html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("#first").toggle(function(){ $("p:first").css("display","none");}, function(){ $("p:first").css("display","block");} ); $("#second").toggle(function(){ $(".second").css("display","block");}, function(){ $(".second").css("display","none");} );});</script><style type="text/css">.second{display:none;}</style></head><body><p>Click me to toggle between different background colors.</p><button id="first">Hello</button><p class="second">Click me to toggle between different background colors.</p><button id="second">Hello</button></body></html> and make sure you reference the jquery file correctly Link to comment Share on other sites More sharing options...
dmei4 Posted September 22, 2010 Author Share Posted September 22, 2010 I switched up a bit. Do you know why it makes the clickable tag go shooting up on load? <html><head><script type="text/javascript" src="jquery-1.4.2.js"></script><script type="text/javascript">$(document).ready(function(){ $("#first").slideToggle(function(){ $(this).next(".first").css("display","none");}, function(){ $(".first").css("display","block");} ); $("#second").slideTtoggle(function(){ $(".second").css("display","block");}, function(){ $(".second").css("display","none");} );});</script><style type="text/css">.second{display:none;}</style></head><body><div id="first">Hello</div><div class="first">Click me to toggle between different background colors.</div><div id="second">Hello</div><div class="second">Click me to toggle between different background colors.</div><div id="second">Hello</div><div class="second">Click me to toggle between different background colors.</div><div id="second">Hello</div><div class="second">Click me to toggle between different background colors.</div><div id="second">Hello</div><div class="second">Click me to toggle between different background colors.</div></body></html> Link to comment Share on other sites More sharing options...
BobbyFrankyJim Posted September 22, 2010 Share Posted September 22, 2010 because you made the first element without a .click event you made it with a .slideToggle event which is an effect and since there is no .click or any event it treats the only event as (document).ready so as soon as the page loads it happens. And also check the jquery effect for the second part Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.