CODEWITHSUNDEEP
javascripthtmlcss
Casualty
Casualty

Reputation: 43

Displaying text when link is clicked

This is inside my CSS:

div.hide { 
     display:none; 
     }
div.show {
     color: #66CCFF;
     }

This is in my HTML:

<a href="http://www.website.com/#16:10">16:10</a>

<script language="JavaScript">
    function showText(show,hide)
    {
        document.getElementById(show).className = "show";
        document.getElementById(hide).className = "hide";
    }
</script>

<a name="16:10" onclick="showText('text1')" href="javascript:void(0);"></a>
<div id="text1" class="hide">This is your monitors aspect ratio.</div>

I'm trying to make the first link display the "This is your monitors aspect ratio." text lower on the page.

Any help is much appreciated.

Upvotes: 0

Views: 12068

Answers (4)

S. Mayol
S. Mayol

Reputation: 2625

Here I am going to provide an example with something that I was working, thank you Alberto Montellano for the example, that gave me an idea, however what was required at the end was something a little different, with the option not to show the data and display it only when I click and make it disappear when click again. In this example I am going to give you two options; you can have a button or a link to trigger the JS function to display and hide the body text, you can choose if you want the button or link that is way I put a comment (optional), both behave as the same, it is up to you which one you want to use. 

<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<style>
#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}
</style>
</head>
<body>

<!-- text before the button or link -->
<p>Click the "PIN" button (or link) to display PIN options:</p>


<!-- The Pin button (optional) -->
<button type="button" onclick="myFunction()">PIN button:</button>

<!-- The Pin link (optional) -->
</br></br></br>
<a onclick="myFunction()" href="javascript:void(0);">PIN link:</a>


<!--Data will display or hide (toggle)-->
<div id="myDIV"style="display:none;">
These are the steps to get your PIN number: Bla bla bla.
</div>


<p><b>Note:</b> The text display when you click the button or link will take space, if you click again will be toggle.</p>

<!-- JS -->
<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>

Upvotes: 0

zero298
zero298

Reputation: 26877

Pure CSS Answer

Ok, if you just want to append text after you have moved to a position in a page using an anchor tag, you could do it with nothing but CSS similar to the following:

 a:target:after{
    content: " Test";
    background-color: #ccffcc;
 }

What this does is appends the text "Test" after the active anchor and colors. Here is an example page with implementation:

<!DOCTYPE html>
<html>
   <head>
      <title>Link Printer 2</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width">
      <style>
         a:target:after{
            content: " Test";
            background-color: #ccffcc;
         }
         .bigSection{
            height: 200px;
         }
      </style>
   </head>
   <body>
      <div class="bigSection">
         <div><a name="first">First</a></div>
         <div><a href="#first">To First</a></div>
         <div><a href="#second">To Second</a></div>
         <div><a href="#third">To Third</a></div>
      </div>
      <div class="bigSection">
         <div><a name="second">Second</a></div>
         <div><a href="#first">To First</a></div>
         <div><a href="#second">To Second</a></div>
         <div><a href="#third">To Third</a></div>
      </div>
      <div class="bigSection">
         <div><a name="third">Third</a></div>
         <div><a href="#first">To First</a></div>
         <div><a href="#second">To Second</a></div>
         <div><a href="#third">To Third</a></div>
      </div>
   </body>
</html>

Answer using JavaScript

You need to bind an eventListener and prevent it from moving to the next page. Here is a way to do it with JavaScript or CSS. The JavaScript way will actually set the text to whatever you want. The CSS way will hide actually hide the element.

<!DOCTYPE html>
<html>
   <head>
      <title>Link Printer</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width">
      <style>
         .hide{
            display: none;
         }
      </style>
      <script>
         function jsShowText(event) {
            var divToManip = document.getElementById("text");
            if (divToManip.innerHTML === "") {
               divToManip.innerHTML = "Hello";
            }
            else {
               divToManip.innerHTML = "";
            }
            event.preventDefault();
         }
         function cssShowText(event) {
            var divToManip = document.getElementById("text");
            if (divToManip.className === "") {
               divToManip.className = "hide";
            }
            else {
               divToManip.className = "";
            }
            event.preventDefault();
         }
         function setListeners() {
            document.getElementById("jsPrinter").addEventListener("click", jsShowText, false);
            document.getElementById("cssPrinter").addEventListener("click", cssShowText, false);
         }
         window.onload = setListeners;
      </script>
   </head>
   <body>
      <div><a id="jsPrinter" href="" onclick="showText();">Click With JavaScript</a></div>
      <div><a id="cssPrinter" href="" onclick="showText();">Click With CSS</a></div>
      <div id="text">I'm text</div>
   </body>
</html>

Upvotes: 1

Alberto Montellano
Alberto Montellano

Reputation: 6246

"showText" must receive an id parameter to be used with the call to "document.getElementById"

Try this, just 1 link that will display the text below after click:

<a name="16:10" onclick="showText('text1')" href="javascript:void(0);">16:10</a>

<script language="JavaScript">
   function showText(id)
    {
        document.getElementById(id).style.display = "block";
    }
</script>

<div id="text1" style="display:none;">This is your monitors aspect ratio.</div>

I'm just using style display to hide/show the element. Hope it helps.

Upvotes: 1

Mehran Hatami
Mehran Hatami

Reputation: 12961

just change your css like this:

div.show {
    display:block;
    color: #66CCFF;
}

Upvotes: 0

Related Questions