CSS - Show/Hide Content with Anchor Name

Show and hide content with link or anchor

Thought to give this as a comment, but would be hard to read. Its a DRY improvement of @Sanchit Patiyal answer. AFAIK its supported pretty well:

[id$="Window"] {

  display:none;

}

[id$="Window"]:target {

  display:block;

}

.window{

   width:300px;

   height:300px;

   overflow:hidden;

 }

<a href="#firstWindow">firstWindow</a>

<a href="#secondWindow">secondWindow</a>

<a href="#thirdWindow">thirdWindow</a>

<div class="window">

    <div id="firstWindow" class="window">

         firstWindow

    </div>

    <div id="secondWindow" class="window">

         secondWindow

    </div>

    <div id="thirdWindow" class="window">

         thirdWindow

    </div>

</div>

CSS - show / hide content with anchor name

Working Example

Try this Html

<a href="#a">a</a>
<a href="#b">b</a>
<a href="#c">c</a>

<div id="a" class="page"> this is a id</div>
<div id="b" class="page"> this is b id</div>
<div id="c" class="page"> this is c id</div>

and Css

#a, #b, #c{
    display:none;
}
#a:target{
    display:block;
}
#b:target{
    display:block;
}
#c:target{
    display:block;
}

Hide div with anchor name on pageload and show it only while clicking the link

You will need to integrate some JavaScript & CSS for this. The steps will be:

Your CSS will have to hide the DIV you want hidden

In the anchor's onClick, you clear the class that's hiding the DIV:

<body>
    <a href="#myhiddensection" onClick="document.getElementById('myhiddensection').style.display='block';">Go there!</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div>Nothing below to see at load!</div>
    <div id="myhiddensection" style="display: none">Hello there!</div>
</body>

Do note that the above example is using pure JS. If you were to use something like jQuery it could be much cleaner as below and you wouldn't have to worry about weird cross-browser quirks:

<body>
    <a href="#myhiddensection" onClick="$('#myhiddensection').show();">Go there!</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div>Nothing below to see at load!</div>
    <div id="myhiddensection" style="display: none">Hello there!</div>
</body>

How do I hide anchor text without hiding the anchor?

Try

 a{
    line-height: 0; 
    font-size: 0;
    color: transparent; 
 }

The color: transparent; covers an issue with Webkit browsers still displaying 1px of the text.

On text change of anchor tag show/hide a div with JavaScript

You will need to bind the function to an event. For example in jQuery you can use something like this:

    $("body").on('DOMSubtreeModified', "#searchFor", function() {
         if ($("#searchFor").text() === "_") {
           $('.lds-roller').show();
         }
         else {
          $('.lds-roller').hide();
         }

    });

At the moment, your code is running once on load time and that is why it only shows the div.

How to hide Anchor icon when jump to specific part of page

$( ".scroll-regform" ).click(function() {
  $(this).addClass('hideIcon')
});

.scroll-regform, .mobile {
    display: block!important;
}
.scroll-regform {
    right: 44%;
    top: 200px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: 3;
    line-height: 30px;
    text-align: center;
    font-size: 28px;

}
.scroll-regform.hideIcon{
  display: none !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#scroll-regform" href="#" class="scroll-regform"><i class="fa fa-angle-down animated-menu bounce" aria-hidden="true" alt="download" class="pt-8">ICON</i></a>
 
 <div class="col-md-7" id="scroll-regform">
 <p>content</p>
 </div>

How do I show and hide input when anchor tag is clicked?

Something like the following should do the trick.

function showhide(which){

 var edit = document.getElementById('edit');

 var cancel = document.getElementById('cancel'); 

 var input = document.getElementById('firstname');

 var label = document.getElementsByClassName('ansProfile')[0];

 

 if(which==='edit'){

    if(edit.checked){

       cancel.checked=false;

       label.style.display='none';

       input.style.display='inline'; 

    }else{

       label.style.display='inline';  

    }

  }else{

     if(cancel.checked){

       edit.checked=false;

       label.style.display='inline';

       input.style.display='none'; 

    }else{

       input.style.display='inline';  

    }  

  }

}

<label class="lblProfile">First Name: </label>

<label class="ansProfile">${resident.firstname}</label>

<input id="firstname"name="firstname" type="text" placeholder="${resident.firstname}"/>

<input id='edit' type='checkbox'   onClick='showhide("edit")'/> Edit 

<input id='cancel' type='checkbox' onClick='showhide("cancel")'/> Cancel