DizzyDan Posted December 19, 2010 Share Posted December 19, 2010 What i am looking for is when i click a link it shows the text, then when i click another link it closes the other link and shows different text.I started with this but i'm not to sure exactly where to go from here. <html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("a").click(function(){ $("p").toggle(); });});</script></head><body><a href="#">Toggle</a> | <a href="#">Toggle 2</a><p>Test here</p><p>Different text</p></body></html> EDIT: also I want it to start with all text areas closed. Link to comment Share on other sites More sharing options...
boen_robot Posted December 19, 2010 Share Posted December 19, 2010 You may want to create a class for each link and the corresponding div.Then, in the onclick handler, check the class, and use THAT as part of the selector of the thing to toggle.And to have all areas hidden by default, you can simply do a toggle at the start.This should roughly translate to something like: <html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("p").toggle(); $("a").click(function() { $("p."+this.className).toggle(); });});</script></head><body><a href="#" class="p1">Toggle</a> | <a href="#" class="p2">Toggle 2</a><p class="p1">Test here</p><p class="p2">Different text</p></body></html> (assuming "this" points to the element for which the function is executed... I haven't worked with jQuery, so I don't know for sure) Link to comment Share on other sites More sharing options...
abdelelbouhy Posted December 19, 2010 Share Posted December 19, 2010 What i am looking for is when i click a link it shows the text, then when i click another link it closes the other link and shows different text.I started with this but i'm not to sure exactly where to go from here.<html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("a").click(function(){ $("p").toggle(); });});</script></head><body><a href="#">Toggle</a> | <a href="#">Toggle 2</a><p>Test here</p><p>Different text</p></body></html> EDIT: also I want it to start with all text areas closed. to make your life easier markup them as list each link and its paragraph in one list then it's easier to select them and here what you want to do$(function(){ $('p').hide(); $('a').click(function(){ $(this).click(function(){$(this).next('p').toggle();}); $(this).parents('ul').children('li').children('p').hide(); $(this).next('p').toggle(); }) })();</script></head><body><ul> <li><a href="#">click1</a><p>hello all</p></li> <li><a href="#">click1</a><p>hello all</p></li> <li><a href="#">click1</a><p>hello all</p></li> <li><a href="#">click1</a><p>hello all</p></li></ul></body></html> Link to comment Share on other sites More sharing options...
DizzyDan Posted December 22, 2010 Author Share Posted December 22, 2010 $(function(){$('p').hide();$('a').click(function(){$(this).click(function(){$(this).next('p').toggle();});$(this).parents('ul').children('li').children('p').hide();$(this).next('p').toggle();})})();Ok im stumped i copied the code exactly how you had it, and it worked yesterday. I tried it again today so i could test it on a launched site ... here ... I copied and pasted just like i did before and now its not working. Even when i test of not live it doesn't work. It works in the "try it editor" on w3 schools but not on my live site and not local on my pc browser.EDIT: I think this is just out of my league for now i spent hours getting absolutely nowhere. I just ordered a book, Ill give it some study time, its not as easy to just "jump in" like with css. Thanks for your help guys though, hopefully i will be back to this soon i usually catch on to this stuff quick. I truly appreciate the help! Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.