amitamberker Posted September 8, 2017 Share Posted September 8, 2017 Hello Dear Friends!!!... :-) Can you please Help me? Look forward to hearing from you. Thank you! Quote <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled 1</title> </head> <body> <div style="width:243px"> <div>Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...............<br /> <br /> <p style="margin:10px 0 0 133px;font:10px/12px Tahoma, Arial, Geneva, sans-serif; color:#4A7FC9; text-decoration:underline;"><a href="#"><strong>Click to Read More</strong></a></p></div> <div style="margin:30px 0 0 0">By default, this Segment should Hide after Loading the Page. Upon Clicking the above "Click to Read More" blurb, this Segment should Display</div> </div> </body> </html> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 8, 2017 Share Posted September 8, 2017 Why should it hide? there is nothing there to cause it to hide. 1 Link to comment Share on other sites More sharing options...
amitamberker Posted September 8, 2017 Author Share Posted September 8, 2017 2 hours ago, dsonesuk said: Why should it hide? there is nothing there to cause it to hide. I want to Hide the following DIV which is Located just above the </body> <div style="margin:30px 0 0 0">Blah... Blah... Blah...</div> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 8, 2017 Share Posted September 8, 2017 https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp Link to comment Share on other sites More sharing options...
amitamberker Posted September 8, 2017 Author Share Posted September 8, 2017 4 minutes ago, dsonesuk said: https://www.w3schools.com/howto/howto_js_toggle_hide_show.asp Yesterday Night I Tried that. In that CODE, first the DIV Displays and then upon Clicking the Tab, it Hides. I want the Other Way around. I mean, first it should Hide and then upon Clicking it should Display. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 8, 2017 Share Posted September 8, 2017 All you have to do is set the divs inline style display to display: none; make sure it has the id reference, and you are there. 1 Link to comment Share on other sites More sharing options...
JMRKER Posted September 10, 2017 Share Posted September 10, 2017 As 'dsonesuk' says, have you tried this ... <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title> HTML5 page </title> <style> .hide { display: none; } </style> </head> <body> <button onclick="myFunction('myDIV')">Click Me</button> <div id="myDIV" class="hide"> This is my DIV element. </div> <script> function myFunction(info) { document.getElementById(info).classList.toggle('hide'); } </script> </body> </html> Link to comment Share on other sites More sharing options...
amitamberker Posted September 11, 2017 Author Share Posted September 11, 2017 On 9/8/2017 at 6:35 PM, dsonesuk said: All you have to do is set the divs inline style display to display: none; make sure it has the id reference, and you are there. OK... I will try and Revert Back to you. Thank you My Friend! Link to comment Share on other sites More sharing options...
amitamberker Posted September 11, 2017 Author Share Posted September 11, 2017 On 9/8/2017 at 6:35 PM, dsonesuk said: All you have to do is set the divs inline style display to display: none; make sure it has the id reference, and you are there. Please see the attached HTML File. Why am I not able to See the "Hand Icon" upon taking the Cursor on "Click to Read More"? Should I add href="#" after onclick="myFunction()" ? Please let me know. By the way, I have another Query. I want to Change my Display Name. What should I Do? ReadMore_Click_And_DropDown.html Link to comment Share on other sites More sharing options...
amitamberker Posted September 11, 2017 Author Share Posted September 11, 2017 JMRKER - I am still Discussing with dsonesuk and Following his Instructions. Thank you. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 11, 2017 Share Posted September 11, 2017 (edited) The hand pointer only shows for elements like <a> elements, any other element you would have to set the cursor style by using css cursor: pointer; link does not allow access, and I don't know what u mean by display name? Edited September 11, 2017 by dsonesuk Link to comment Share on other sites More sharing options...
amitamberker Posted September 15, 2017 Author Share Posted September 15, 2017 Quote The hand pointer only shows for elements like <a> elements, any other element you would have to set the cursor style by using css cursor: pointer; Ok. Got it. But however, like I asked you is it Ok to add href="#" in <a> element? Or you would Recommend to Set the Cursor style by using CSS cursor:pointer? Which option is better? Quote link does not allow access, Means? Quote and I don't know what u mean by display name? I mean, my w3schools Profile Name (aka) Display Name. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 15, 2017 Share Posted September 15, 2017 (edited) Using href="#" will have side effects compared to button in that it will reload the page, taking you to top of page with address bar url having '#' at end. You can prevent this using javascript: void() in href OR by passing 'event' as function called argument you can within that function use event with preventDefault() to stop the anchors normal action triggering. https://www.w3schools.com/jsref/event_preventdefault.asp https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_oper_void Display Name is a username? doubt anyone but moderator would have permission to do that, IF allowed. Edited September 15, 2017 by dsonesuk 1 Link to comment Share on other sites More sharing options...
amitamberker Posted September 18, 2017 Author Share Posted September 18, 2017 Quote Using href="#" will have side effects compared to button in that it will reload the page, taking you to top of page with address bar url having '#' at end. Can you please Show Me an Example? By the way, I don't need anything at the End and I Don't want the Page to ReLoad. Quote You can prevent this using javascript: void() in href OR by passing 'event' as function called argument you can within that function use event with preventDefault() to stop the anchors normal action triggering.https://www.w3schools.com/jsref/event_preventdefault.asphttps://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_oper_void Okie. Quote Display Name is a username? doubt anyone but moderator would have permission to do that, IF allowed. Yup. I mean UserName. To which Moderator should I Request? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 18, 2017 Share Posted September 18, 2017 Your lucky, in that the tutorials give you examples in both cases. Moderator to contact, check staff link under browse. Link to comment Share on other sites More sharing options...
amitamberker Posted October 4, 2017 Author Share Posted October 4, 2017 Dear Friends - So, is this the Right Way? Please let me know. dsonesuk said > "Using href="#" will have side effects compared to button in that it will reload the page, taking you to top of page with address bar url having '#' at end." I have used cursor:pointer; in CSS but I not Seeing the Hand Cursor on "Click to Read More". Please help. Look forward to Hearing from you. Quote <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled 1</title> <style type="text/css"> .style1 { font-family: Verdana; font-size: 10pt; text-align:justify; cursor:pointer; } </style> </head> <body> <div style="width:243px"> <div><span class="style1">W3Schools is a popular web site for learning web technologies online.[2] Content includes tutorials and references relating to...</span> <br /> <br /> <p style="margin:10px 0 0 115px;font:9pt Verdana; color:#4A7FC9; text-decoration:underline;"><a onclick="myFunction()"><strong>Click to Read More</strong></a></p></div> <div style="margin:30px 0 0 0;display:none;height:100%" id="myDIV" class="style1">W3Schools is a popular web site for learning web technologies online.[2] Content includes tutorials and references relating to HTML, CSS, JavaScript, PHP, AngularJS, SQL, Bootstrap, and jQuery. It receives more than 10 million unique visitors monthly.[1] Created in 1998, its name is derived from the World Wide Web, but is not affiliated with the W3C (World Wide Web Consortium).[3] It is run by Refsnes Data in Norway.[1] W3Schools presents thousands of code examples. By using an online editor, readers can edit examples and execute the code in a sandbox.<br/> <br/> W3Schools is a popular web site for learning web technologies online.[2] Content includes tutorials and references relating to HTML, CSS, JavaScript, PHP, AngularJS, SQL, Bootstrap, and jQuery. It receives more than 10 million unique visitors monthly.[1] Created in 1998, its name is derived from the World Wide Web, but is not affiliated with the W3C (World Wide Web Consortium).[3] It is run by Refsnes Data in Norway.[1] W3Schools presents thousands of code examples. By using an online editor, readers can edit examples and execute the code in a sandbox.<br/> <br/> W3Schools is a popular web site for learning web technologies online.[2] Content includes tutorials and references relating to HTML, CSS, JavaScript, PHP, AngularJS, SQL, Bootstrap, and jQuery. It receives more than 10 million unique visitors monthly.[1] Created in 1998, its name is derived from the World Wide Web, but is not affiliated with the W3C (World Wide Web Consortium).[3] It is run by Refsnes Data in Norway.[1] W3Schools presents thousands of code examples. By using an online editor, readers can edit examples and execute the code in a sandbox.<br/> <br/> W3Schools is a popular web site for learning web technologies online.[2] Content includes tutorials and references relating to HTML, CSS, JavaScript, PHP, AngularJS, SQL, Bootstrap, and jQuery. It receives more than 10 million unique visitors monthly.[1] Created in 1998, its name is derived from the World Wide Web, but is not affiliated with the W3C (World Wide Web Consortium).[3] It is run by Refsnes Data in Norway.[1] W3Schools presents thousands of code examples. By using an online editor, readers can edit examples and execute the code in a sandbox.<br/> </div> </div> <script> function myFunction() { var x = document.getElementById('myDIV'); if (x.style.display === 'none') { x.style.display = 'block'; } else { x.style.display = 'none'; } } </script> </body> </html> Link to comment Share on other sites More sharing options...
amitamberker Posted October 6, 2017 Author Share Posted October 6, 2017 Waiting... Link to comment Share on other sites More sharing options...
dsonesuk Posted October 6, 2017 Share Posted October 6, 2017 IF you want the pointer to appear when anchor hovered over? Then would it not be a good idea to add the class to anchor and not to span element encasing text just before it! Link to comment Share on other sites More sharing options...
amitamberker Posted October 9, 2017 Author Share Posted October 9, 2017 On 10/6/2017 at 9:28 PM, dsonesuk said: IF you want the pointer to appear when anchor hovered over? Then would it not be a good idea to add the class to anchor and not to span element encasing text just before it! Can you please Explain once again in a Different and More Easier way? Feeling little bit Difficult to Understand. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 9, 2017 Share Posted October 9, 2017 1) Anything using below class will use pointing finger cursor .style1 { font-family: Verdana; font-size: 10pt; text-align:justify; cursor:pointer; } 2) You said On 04/10/2017 at 6:16 PM, amitamberker said: in CSS but I not Seeing the Hand Cursor on "Click to Read More" Which means you would have to apply this styling class name to container element, which would either be a Paragraph, or Anchor, or Strong element that surround the text ' Click to Read More'. BUT! you have applied class name to On 04/10/2017 at 6:16 PM, amitamberker said: <span class="style1">W3Schools is a popular web site for learning web technologies online.[2] Content includes tutorials and references relating to...</span This is outside the scope of what you are trying to target, its scope starts from opening span <span class="style1"> and finishes at </span>, all the text "W3Schools is a popular web site for learning web technologies online.[2] Content includes tutorials and references relating to..." will have the pointer cursor, but anything outside this will work as default styling, which is what is happening to anchor text you are attempting to target, because its outside '<span class="style1">....</span>' scope. 1 Link to comment Share on other sites More sharing options...
amitamberker Posted October 13, 2017 Author Share Posted October 13, 2017 Thank you dsonesuk! Thanks a Lot! Now the Updated CODE looks like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled 1</title> <style type="text/css"> .style1 { font-family: Verdana; font-size: 10pt; text-align:justify; } .style2 { cursor:pointer; } </style> </head> <body> <div style="width:243px"> <div><span class="style1">W3Schools is a popular web site for learning web technologies online.[2] Content includes tutorials and references relating to...</span> <br /> <br /> <p style="margin:10px 0 0 115px;font:9pt Verdana; color:#4A7FC9; text-decoration:underline;"><a onclick="myFunction()"><strong class="style2">Click to Read More</strong></a></p></div> <div style="margin:30px 0 0 0;display:none;height:100%" id="myDIV" class="style1">W3Schools is a popular web site for learning web technologies online.[2] Content includes tutorials and references relating to HTML, CSS, JavaScript, PHP, AngularJS, SQL, Bootstrap, and jQuery. It receives more than 10 million unique visitors monthly.[1] Created in 1998, its name is derived from the World Wide Web, but is not affiliated with the W3C (World Wide Web Consortium).[3] It is run by Refsnes Data in Norway.[1] W3Schools presents thousands of code examples. By using an online editor, readers can edit examples and execute the code in a sandbox.<br/> <br/> W3Schools is a popular web site for learning web technologies online.[2] Content includes tutorials and references relating to HTML, CSS, JavaScript, PHP, AngularJS, SQL, Bootstrap, and jQuery. It receives more than 10 million unique visitors monthly.[1] Created in 1998, its name is derived from the World Wide Web, but is not affiliated with the W3C (World Wide Web Consortium).[3] It is run by Refsnes Data in Norway.[1] W3Schools presents thousands of code examples. By using an online editor, readers can edit examples and execute the code in a sandbox.<br/> <br/> W3Schools is a popular web site for learning web technologies online.[2] Content includes tutorials and references relating to HTML, CSS, JavaScript, PHP, AngularJS, SQL, Bootstrap, and jQuery. It receives more than 10 million unique visitors monthly.[1] Created in 1998, its name is derived from the World Wide Web, but is not affiliated with the W3C (World Wide Web Consortium).[3] It is run by Refsnes Data in Norway.[1] W3Schools presents thousands of code examples. By using an online editor, readers can edit examples and execute the code in a sandbox.<br/> <br/> W3Schools is a popular web site for learning web technologies online.[2] Content includes tutorials and references relating to HTML, CSS, JavaScript, PHP, AngularJS, SQL, Bootstrap, and jQuery. It receives more than 10 million unique visitors monthly.[1] Created in 1998, its name is derived from the World Wide Web, but is not affiliated with the W3C (World Wide Web Consortium).[3] It is run by Refsnes Data in Norway.[1] W3Schools presents thousands of code examples. By using an online editor, readers can edit examples and execute the code in a sandbox.<br/> </div> </div> <script> function myFunction() { var x = document.getElementById('myDIV'); if (x.style.display === 'none') { x.style.display = 'block'; } else { x.style.display = 'none'; } } </script> </body> </html> 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