Jump to content
amitamberker

Default should Hide and Click should Display

Recommended Posts

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>

 

 

 

Share this post


Link to post
Share on other sites
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>

 

Share this post


Link to post
Share on other sites
4 minutes ago, dsonesuk said:

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.

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites
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! 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

JMRKER - I am still Discussing with dsonesuk and Following his Instructions. Thank you.

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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 by dsonesuk
  • Like 1

Share this post


Link to post
Share on other sites
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.asp
https://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?

Share this post


Link to post
Share on other sites

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>

 

 

Share this post


Link to post
Share on other sites

Waiting...

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

  • Thanks 1

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×