Hide/show elements in javascript

Question

<tr>
<td>Name:</td>
<td><span id= "keep">Username</span><input id= "change" value= "Name" style= "display:none;"></td>  
</tr>

I have this, what kind of javascript do I need in order to hide the span and let the input show? This should be done by clicking this edit button:

<a href="#" data-original-title="Edit this user" data-toggle="tooltip" type="button" class="btn btn-sm btn-warning"><i class="glyphicon glyphicon-edit"></i></a>

I have checked other questions on this site for duplication, but I tried alot and none answered my question!

The input is inside the span. A man can literally not hide that span and showing the input at the same time. — Lain
– Lain, Commented Dec 3, 2016 at 16:03
I never knew that there is a type="button" attribute available to anchor tag — brk
– brk, Commented Dec 3, 2016 at 16:03
Ok if I put it outside how could I make it view later? @Lain — hiba
– hiba, Commented Dec 3, 2016 at 16:03
@hiba: document.querySelector('#change').style.display = ''; — Lain
– Lain, Commented Dec 3, 2016 at 16:04
Yes exactly. You cannot hide the span, as it will hide the input also. I would recommend reconsidering modifying the HTML. Otherwise, you can use remove and append javascript functionality to achieve your requirement — Cijo V J
– Cijo V J, Commented Dec 3, 2016 at 16:06

Lain · Accepted Answer · 2016-12-03 16:08:49Z

1

<html>
    <head>
        <script>
            function showMe(){
                document.querySelector('#change').style.display = ''; //Show the input
                document.querySelector('#keep').style.display = 'none' //Hide the span
            }
        </script>
    </head>

    <body>
        <tr>
            <td>Name:</td>
            <td>
                <span id = 'keep'>Username</span>
                <input id = 'change' value= 'Name' style= 'display:none;'>
            </td>  
        </tr>
        <a href = '#' data-original-title = 'Edit this user' data-toggle = 'tooltip' type = 'button' class='btn btn-sm btn-warning' onclick = 'showMe()'><i class = 'glyphicon glyphicon-edit'>click me</i></a>
    </body>
</html>

answered Dec 3, 2016 at 16:08

Lain

3,7361 gold badge22 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hiba Over a year ago

Is there a way I could save what the edit is afterward the edit is done? For example if I refresh the page, the edit stays as they edited it?

hiba Over a year ago

<a data-original-title="Remove this user" data-toggle="tooltip" type="button" class="btn btn-sm btn-success"><i class="glyphicon glyphicon-saved"></i></a> Like if I click this save button it saves the edits?

Lain Over a year ago

Ehm yes, with localStorage, yet a man should create another question for that.

sunil patidar · Accepted Answer · 2016-12-03 16:24:12Z

1

Use This Simple Code

first add library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

your html code

<a href="#" data-original-title="Edit this user" data-toggle="tooltip" type="button" class="btn btn-sm btn-warning"><i class="glyphicon glyphicon-edit"></i>edit</a>

<span id= "keep">Username</span><input id= "change" value= "Name" style= "display:none;"></span>

and use script

<script>
$(document).ready(function(){
    $("a").click(function(){
        $(" #change").toggle();
         $("#keep").hide();
    });
});
</script>

answered Dec 3, 2016 at 16:24

sunil patidar

846 bronze badges

1 Comment

Lain Over a year ago

Reclicking will give weird behavior with one toggle and one static hide.

Collectives™ on Stack Overflow

Hide/show elements in javascript

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related