How could I hide the 'Edit'-link after I press it? and also can I hide the "lorem ipsum" text when I press edit?
<script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
</script>
<td class="post">
<a href="#" onclick="showStuff('answer1'); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>
Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum
</td>
This question is related to
javascript
you can use hidden property of element:
document.getElementById("test").hidden=true;
document.getElementById("test").hidden=false
Though this question has been answered many times before, I thought I would add to it with a more complete and solid answer for future users. The main answer does solve the problem, but I believe it may be better to know/understand the some of various ways to show/hide things.
.
This is the way I used to do it until I found some of these other ways.
Javascript:
$("#element_to_hide").css("display", "none"); // To hide
$("#element_to_hide").css("display", ""); // To unhide
Pros:
Cons:
$("#element_to_hid").css("display", "inline");
otherwise it will default back to "block" or whatever else that it will be forced into.Example: https://jsfiddle.net/4chd6e5r/1/
.
While setting up the example for this one, I actually ran into some flaws on this method that make it very very unreliable.
Css/Javascript:
.hidden {display:none}
$("#element_to_hide").addClass("hidden"); // To hide
$("#element_to_hide").removeClass("hidden"); // To unhide
Pros:
$(".hidden")
.Cons:
Example: https://jsfiddle.net/476oha8t/8/
.
Javascript:
$("element_to_hide").toggle(); // To hide and to unhide
Pros:
Cons:
Example: https://jsfiddle.net/cxcawkyk/1/
.
Javascript:
$("#element_to_hide").hide(); // To hide
$("#element_to_hide").show(); // To show
Pros:
Cons:
Example: https://jsfiddle.net/k0ukhmfL/
.
Overall, I would say the best to be hide()/show() unless you specifically need it to be a toggle. I hope you found this information to be helpful.
If you are using it in a table use this :-
<script type="text/javascript">
function showStuff(id, text, btn) {
document.getElementById(id).style.display = 'table-row';
// hide the lorem ipsum text
document.getElementById(text).style.display = 'none';
// hide the link
btn.style.display = 'none';
}
</script>
<td class="post">
<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>
<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>
I would suggest this to hide elements (as others have suggested):
document.getElementById(id).style.display = 'none';
But to make elements visible, I'd suggest this (instead of display = 'block'):
document.getElementById(id).style.display = '';
The reason is that using display = 'block' is causing additional margin/whitespace next to the element being made visible in both IE (11) and Chrome (Version 43.0.2357.130 m) on the page I'm working on.
When you first load a page in Chrome, an element without a style attribute will appear like this in the DOM inspector:
element.style {
}
Hiding it using the standard JavaScript makes it this, as expected:
element.style {
display: none;
}
Making it visible again using display = 'block' changes it to this:
element.style {
display: block;
}
Which is not the same as it originally was. This could very well not make any difference in the majority of cases. But in some cases, it does introduce abnormalities.
Using display = '' does restore it to its original state in the DOM inspector, so it seems like the better approach.
I would like to suggest you the JQuery option.
$("#item").toggle();
$("#item").hide();
$("#item").show();
For example:
$(document).ready(function(){
$("#item").click(function(event){
//Your actions here
});
});
I recommend Javascript, because its relatively fast and more malleable.
<script>
function showStuff(id, text, btn) {
document.getElementById(id).style.display = 'block';
// hide the lorem ipsum text
document.getElementById(text).style.display = 'none';
// hide the link
btn.style.display = 'none';
}
</script>
<td class="post">
<a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
<span id="answer1" style="display: none;">
<textarea rows="10" cols="115"></textarea>
</span>
<span id="text1">Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</span>
</td>
By ID
document.querySelector('#element-id').style.display = 'none';
By Class (Single element)
document.querySelector('.element-class-name').style.display = 'none';
By Class (Multiple elements)
for (const elem of document.querySelectorAll('.element-class-name')) {
elem.style.display = 'none';
}
You can also use this code to show/hide elements:
document.getElementById(id).style.visibility = "hidden";
document.getElementById(id).style.visibility = "visible";
Note The difference between style.visibility
and style.display
is
when using visibility:hidden unlike display:none, the tag is not visible, but space is allocated for it on the page. The tag is rendered, it just isn't seen on the page.
See this link to see the differences.
You should think JS for behaviour, and CSS for visual candy as much as possible. By changing your HTML a bit :
<td class="post">
<a class="p-edit-btn" href="#" onclick="showStuff(this.parentNode);return false;">Edit</a>
<span id="answer1" class="post-answer">
<textarea rows="10" cols="115"></textarea>
</span>
<span class="post-text" id="text1">Lorem ipsum ... </span>
</td>
You'll be able to switch from one view to the other simply using CSS rules :
td.post-editing > a.post-edit-btn,
td.post-editing > span.post-text,
td.post > span.post-answer
{
display : none;
}
And JS code that switch between the two classes
<script type="text/javascript">
function showStuff(aPostTd) {
aPostTd.className="post-editing";
}
</script>
Just create hide and show methods yourself for all elements, as follows
Element.prototype.hide = function() {
this.style.display = 'none';
}
Element.prototype.show = function() {
this.style.display = '';
}
After this you can use the methods with the usual element identifiers like in these examples:
document.getElementByTagName('div')[3].hide();
document.getElementById('thing').show();
or:
<img src="removeME.png" onclick="this.hide()">
Source: Stackoverflow.com