barryg Posted December 16, 2013 Share Posted December 16, 2013 Hello! I have posted about this topic on Stack Overflow, but the responses I get seem to be a tad above my head, and I think they get impatient with my rudimentary knowledge. I'd like to post my question here, as a student and see if I can get an answer: What I want is to toggel two different passages one in French and one in English from hidden to visible. Here's the blog entry I'm talking about; http://techno-french.com/learning-french-online-free/learn-french-with-mouse-trap-dictee I would like to separately hide or show either the French or the English passage. Here's what the suggesion was at Stack Overflow: <!DOCTYPE html><html><head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script><script>$(document).ready(function(){$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});});</script></head><body><p style="display:none">If you click on the "Hide" button, I will disappear.</p><button id="hide">Hide</button><button id="show">Show</button></body></html> But this either hides or shows BOTH passages. How can I toggle them on or off INDEPENDENTLY? Any help would be appreciated. Barry Link to comment Share on other sites More sharing options...
Hadien Posted December 16, 2013 Share Posted December 16, 2013 do you want the english and french paragraphs to be shown and hidden independently from each other (as in if you hide the english, french is unaffected, and when you show english again, french is still unaffected?) well what you can do create event handlers by css class and not just by element ID. with id, only one element will be used for all the event handling, but if you create event handles by classes, then you can have individual elements handle events relative to the elements around them. I might've not explained that as well as I could. so let me show by example. first lets group each button with the paragraph tag that it will be in charge of hiding, like so: HTML: <div> <p> this is my english paragraph. blah blah blah </p> <button class="collapsible">hide</button></div><div> <p> this is my french paragraph. Aren't you impressed at how fluent I am? </p> <button class="collapsible">hide</button></div> notice that the button and the paragraph it'll hide are direct siblings. plus there is only ONE paragraph in each div tag. next lets add in some special CSS rules to apply only when certain classes are added. CSS: .hidden>p {display:none;} what that means is that any paragraph element whose direct parent just so happens to have a class "hidden" then that paragraph must hide itself. what this grants us is the ability to independently hide each paragraph separately. so if one div has class="hidden", it only hides the paragraph thats directly inside it and won't affect any other paragraph. now, lets go ahead and add in the jQuery to make sure hidden gets added and removed like you want: jQuery: $(document).ready(function(){ $(".collapsible").click(function(){ var button = $(this); //goes to the buttons parent (the div) and // adds the hidden class if its not there // otherwise it removes the hidden class so // that the paragraph will reshow button.parent().toggle("hidden"); //if the paragraph is hidden, change button // text to "show". Otherwise paragraph is // visible, change button text to "hide" button.parent().hasClass("hidden") ?button.text("show") :button.text("hide"); });}); what this does is that it looks for all elements that have the "collapsible" class (those will be the buttons) and attaches on click even handlers so that when the user clicks them jQuery will add/remove the hidden class from the div tags which are holding a paragraph, and at the same time the text in the button should update correctly as well. so to walk you through what is happening, when you click on a button, it's on click even will trigger, starting its unique function. this function will look at the button that was clicked and move up to the element thats containing the button (the div tag). It will then either add OR remove the class "hidden" to/from the tag, depending if it was already there. then makes sure the button updates with the correct text. afterwards CSS will kick in and notice that the styling on this one element has changed. Thus the browser will automatically update and cascade all the styles that have to do with it, which results in the child paragraph's display being changed to none/default. Link to comment Share on other sites More sharing options...
barryg Posted December 22, 2013 Author Share Posted December 22, 2013 Sorry to ask for help then disappear. I appreciate your help. I put all of what I thought I understood of what you said into Dreamweaver and hit the "LIVE" button, but it didn't work. Can you check my code, below, and tell me what I've done wrong? <!DOCTYPE html><html><head><script src="http://ajax.googleap...1/jquery.min.js"></script><script>$(document).ready(function(){ $(".collapsible").click(function(){ var button = $(this); //goes to the buttons parent (the div) and // adds the hidden class if its not there // otherwise it removes the hidden class so // that the paragraph will reshow button.parent().toggle("hidden"); //if the paragraph is hidden, change button // text to "show". Otherwise paragraph is // visible, change button text to "hide" button.parent().hasClass("hidden") ?button.text("show") :button.text("hide"); });}); </script></head><style>.hidden>p {display:none;"} </style><body><div> <p> this is my english paragraph. blah blah blah </p> <button class="collapsible">hide</button></div><div> <p> this is my french paragraph. Aren't you impressed at how fluent I am? </p> <button class="collapsible">hide</button></div></body></html> I do know CSS, but I am not familiar with the .hidden>p {display: none;} notation you mention. Also, I want the initial state of each paragraph to be hidden. Thanks for being so patient. Barry Link to comment Share on other sites More sharing options...
Hadien Posted December 23, 2013 Share Posted December 23, 2013 1). <script src="http://ajax.googleap...1/jquery.min.js"></script> 2). button.parent().toggle("hidden"); 3). I do know CSS, but I am not familiar with the .hidden>p {display: none;} notation you mention. 4).Also, I want the initial state of each paragraph to be hidden. Thanks for being so patient. 1).Not sure if that's just the forum minifying the url, but its not valid on my end. Make sure its loading correctly on your end. 2).Sorry that should have been "toggleClass()" not "toggle()". 3). The ">" is basically a "direct descendant" selector. for example "body>p" would affect the <p> tag in: <body> <p></p></body> because the p tag is a direct descendant of the body, it is the body's child. however this <p> tag: <body> <div> <p></p> </div></body> is not affected as its not the DIRECT descendant of the body, but more of a grandchild. and that is the biggest, and well only, difference between the two selectors ".hidden>p" and ".hidden p". 4). If you want for them to begin hidden then have the divs start with the class="hidden" and change the button text to show <div class="hidden"> <p></p> <button class="collapsible">show</button></div> Link to comment Share on other sites More sharing options...
barryg Posted December 30, 2013 Author Share Posted December 30, 2013 Hadien, I think I've got it to work, and it's just what I wanted. Thanks so much for sticking with me. I know I'm way over my head and probably shouldn't even be wasting this forum's time, but instead of telling me to go read a book, you helped me. Thanks again! Barry Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now