onClick - Hide/Display Div - javascript

In this i want a function that when the user click on "Button 01" it should make visible the DIVid "01". After this when click on some other button, it should it hide the previous DIVid and make visible the relevant DIVid.
I have created a fiddle.
function Visibility() {
var har_element = document.getElementById('C');
var meth_element = document.getElementById('D');
var main_element = document.getElementById('E');
var vis = har_element.style;
if(vis.display == 'block') {vis.display = 'block';
meth_element.style.display='block';
main_element.style.display='block';
} else {
vis.display = 'block';
meth_element.style.display='block';
main_element.style.display='block';
}
}

try this
window.onload = function(){
hideSomeDivs();
}
function showHide(showHidebuttonId)
{
hideAll();
if(showHidebuttonId == "1")
document.getElementById("first").style.display = 'block';
else if(showHidebuttonId == "2")
document.getElementById("second").style.display = 'block';
else if(showHidebuttonId == "3")
document.getElementById("third").style.display = 'block';
else if(showHidebuttonId == "4")
document.getElementById("fourth").style.display = 'block';
else if(showHidebuttonId == "5")
document.getElementById("fifth").style.display = 'block';
}
function hideAll(){
document.getElementById("first").style.display = 'none';
document.getElementById("second").style.display = 'none';
document.getElementById("third").style.display = 'none';
document.getElementById("fourth").style.display = 'none';
document.getElementById("fifth").style.display = 'none';
}
function hideSomeDivs()
{
document.getElementById("second").style.display = 'none';
document.getElementById("third").style.display = 'none';
}

Related

Resetting a single form field onclick?

I have the code below for showing/hiding html sections on button click using javascript. In addition to hiding the section, when an alternative button is clicked, I also want to reset the specific fields to their default values but I'm struggling to do so.
function Prefs() {
var x = document.getElementById('continents');
var y = document.getElementById('countries');
if (x.style.display === 'none') {
x.style.display = 'block';
y.style.display = 'none';
}else if(x.style.display === 'block'){
x.style.display = 'none';
y.style.display = 'none';
} else {
x.style.display = 'none';
}
}
I would do something like this,
function Prefs() {
var x = document.getElementById('continents');
var y = document.getElementById('countries');
if (x.style.display === 'none') {
x.style.display = 'block';
y.style.display = 'none';
x.value = "";
y.value = "";
}else if(x.style.display === 'block'){
x.style.display = 'none';
y.style.display = 'none';
x.value = "";
y.value = "";
} else {
x.style.display = 'none';
}
}
If you want reset entire form use reset() method:
$('#yourFormId')[0].reset();
Or if you want reset specific input just use defaultValue propertie:
$("#yourInput").prop("defaultValue");

How to compress this code into one block

I want to compress all this code into a single block instead of 5. It works perfect, but it is very bloated. Any other tips for improving this code would be greatly appreciated.
JS:
function vanish1() {
var el = document.getElementById('priceCheck1');
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
function vanish2() {
var el = document.getElementById('priceCheck2');
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
function vanish3() {
var el = document.getElementById('priceCheck3');
if (el.style.display == "block") {
el.style.display = "none";
} else {
el.style.display = "block";
}
}
HTML:
<div id="priceCheck1">
test1
</div>
<div id="priceCheck2">
test2
</div>
<div id="priceCheck3">
test3
</div>
You could do this:
function vanish(elementName) {
var el = document.getElementById(elementName);
if (el.style.display == "block") el.style.display = "none";
else el.style.display = "block";
}
Function call:
vanish('priceCheck1');
Hello you can add a class name for the HTML.
then you can get each HTML by classname..
Even smaller...
function vanish(style) {
style.display == "block" ? style.display = "none" : style.display = "block";
}
vanish(document.getElementById("priceCheck1").style);
or
function vanish(element) {
element.style.display == "block" ? element.style.display = "none" : element.style.display = "block";
}
vanish(document.getElementById("priceCheck1"));

Can somebody teach me how to reset the menu?

var lastid;
function show_submenu(obj) {
var ele = document.getElementById(obj).style;
var elemLastId = document.getElementById(lastid);
if (elemLastId != null) {
elemLastId.style.display = "none";
}
lastid = obj;
if (ele.display == "none") {
ele.display = "block";
} else {
ele.display = "none";
}
}
function toggle_menu(id){
var menu = document.getElementById(id);
if(menu.style.display == 'none')
menu.style.display = 'block';
else
menu.style.display = 'none';
}
Can somebody teach me how to debug this code?
I want to reset the main level when I click the button of menu again.

Toggle visibility of two divs at once

I am using the following code to toggle visibility of a div area:
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
To toggle it, I am using:
onclick="toggle_visibility('id_of_element_to_toggle');"
How can I toggle the visibility of 2 divs at once? I want to make them switch. The simpler the method the better.
MORE INFO:
I am not having an luck. Here is my code:
Change Payment Method
<script type="text/javascript">
function toggle_visibility(id, callgraph) {
var e = document.getElementById(id);
var e2 = document.getElementById(callgraph);
if(e.style.display == 'block')
e.style.display = 'none';
e2.style.display = 'block';
else
e.style.display = 'block';
e2.style.display = 'none';
}
</script>
The crudest solution would be to run it twice .. (once for each id)
onclick="toggle_visibility('first-id');toggle_visibility('second-id')"
Another would be to pass an array of id values
<script type="text/javascript">
function toggle_visibility(ids) {
for(i=0,len = ids.length; i < len; i++) {
var e = document.getElementById(ids[i]);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
}
</script>
And call it like this
onclick="toggle_visibility(['first-id','second-id']);"
can't you use same function but add the other id ?
<script type="text/javascript">
function toggle_visibility(id1,id2) {
var e = document.getElementById(id1);
var f = document.getElementById(id2);
if(e.style.display == 'block'&& f.style.display == 'block')
{
e.style.display = 'none';
f.style.display = 'none';
}
else
{
e.style.display = 'block';
f.style.display = 'block';
}
}
</script>
then
onclick="toggle_visibility('id_of_element_to_toggle1','id2');"
By "make them switch" do you mean that hiding one always shows the other?
For starters, you'd need a reference to both elements when you call the function:
onclick="toggle_visibility('id_of_element_to_toggle', 'id_of_other_element');"
Then in your function it's just a matter of setting both of them:
function toggle_visibility(id1, id2) {
var e1 = document.getElementById(id1);
var e2 = document.getElementById(id2);
if(e1.style.display == 'block')
e1.style.display = 'none';
e2.style.display = 'block';
else
e1.style.display = 'block';
e2.style.display = 'none';
}
It's not terribly elegant, but should get the job done clearly and effectively. (With a potential added benefit that if by some other means the two elements get "out of sync" then this would re-sync them. Or a potential added bug of the same functionality, depending on how you look at it I suppose.)
Not sure if this is exactly what you want, but I would suggest to you simply add an argument to your function to include another DIV element, i.e.:
<script type="text/javascript">
function toggle_visibility(id1, id2) {
var e1 = document.getElementById(id1);
var e2 = document.getElementById(id2);
if(e1.style.display == 'block')
e1.style.display = 'none';
e2.style.display = 'none';
else
e1.style.display = 'block';
e2.style.display = 'block';
}
</script>
Hope it helps

Disabling onclick attribute with javascript

How do I disable the other onclick event once one of them has been activated. Both divs are set to display:none; in the CSS. This is probably really simple but I am new to programming.
HTML
<a id="leftbutton" href="#" onclick="showDiv(this.id); return false;">click me</a>
<a id="righttbutton" href="#"onclick="showDiv(this.id); return false;">click me</a>
Javascript
function showDiv(id)
{
if(id == "leftbutton"){
document.getElementById('orangediv').style.display = 'block';
}else{
document.getElementById('greendiv').style.display = 'block';
}}
this should do the trick:
function showDiv(id)
{
if(id == "leftbutton"){
document.getElementById('orangediv').style.display = 'block';
document.getElementById('righttbutton').onclick = null;
}else{
document.getElementById('greendiv').style.display = 'block';
document.getElementById('leftbutton').onclick = null;
}}
Like this for example:
function showDiv(id){
if (id == "leftbutton"){
document.getElementById('orangediv').style.display = 'block';
document.getElementById('rightbutton').onclick = "#";
}else{
document.getElementById('greendiv').style.display = 'block';
document.getElementById('leftbutton').onclick = "#";
}}
Something along these lines:
function showDiv(id){
var o = document.getElementById('orangediv');
var g = document.getElementById('greendiv');
if (id == "leftbutton"){
o.style.display = 'block';
}else{
g.style.display = 'block';
}
o.writeAttribute('onclick','');
g.writeAttribute('onclick','');
}
Just set the onclick property of the other element to null;
if (id == "leftbutton"){
document.getElementById('orangediv').style.display = 'block';
document.getElementById('righttbutton').onclick = null;
}
else{
document.getElementById('greendiv').style.display = 'block';
document.getElementById('leftbutton').onclick = null;
}
}
function showDiv(id) {
if ( showDiv.executed ) {
return false;
}
if ( id === "leftbutton" ) {
document.getElementById('orangediv').style.display = 'block';
} else {
document.getElementById('greendiv').style.display = 'block';
}
showDiv.executed = true;
}
showDiv.executed = false;
Doing it this way, you could always re-enable the showing by simply setting showDiv.executed to false.
You could test if the other element is displayed :
function showDiv(id)
{
if (id == "leftbutton" && (document.getElementById('greendiv').style.display == 'none'))
{
document.getElementById('orangediv').style.display = 'block';
}
else if(id == "rightbutton" && (document.getElementById('orangediv').style.display == 'none'))
{
document.getElementById('greendiv').style.display = 'block';
}
}
You can set the href attribute as id of div which should be visibled after you click.
showDiv function can get entire element as argument, then you have access to it attributes as well. Second argument can be a id of element you should hide,
<a id="leftbutton" href="orangediv" onclick="showDiv(this,'rightbutton');return false">click me</a>
<a id="righttbutton" href="greendiv"onclick="showDiv(this,'leftbutton');return false">click me</a>
And in js:
var showDiv =function(el, toHide){
document.getElementById( el.href ).style.display = 'block';
document.getElementById( toHide ).style.display = 'none';
el.onclick = null; //remove onclick declaration from this anchor.
}

Categories