Combine two js functions to show/hide toggle - javascript

I'm currently using two functions to show and hide elements on a project I'm working on.
One function is for when the element is currently .display = 'block' and the other is for when the element is currently .display = 'none'.
function hide1(id) {
ele = document.getElementById(id);
if (ele.style.display == 'block')
ele.style.display = 'none';
else
ele.style.display = 'block'; }
function hide2(id) {
ele = document.getElementById(id);
if (ele.style.display == 'none')
ele.style.display = 'block';
else
ele.style.display = 'none'; }
I'm all for optimization and am wondering if there is a way to combine both functions into one, or if its fine to keep them as they are.
Cheers,

function hide(id) {
ele = document.getElementById(id);
ele.style.display = (ele.style.display == 'block')?'none':'block';
}

function ChangeDisplay(id,prevDisplay,newDisplay) {
ele = document.getElementById(id);
if (ele.style.display == prevDisplay)
ele.style.display = newDisplay;
else
ele.style.display == prevDisplay;
}
That should do your work

Related

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"));

Toggle visibility (from 2 DIVs; if 1 DIV is visible, the other shouldn't be and vice versa)

I have a toggle menu. 2 hyperlinks for 2 divs.
I found below code from web. It works as intended. Since I want only 1 of my div to be visible, I tried to edit the code. I don't know Javascript. I tried to write it similar to PHP.
For the time being code doesn't work. (It does nothing onclick)
original code
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'none')
e.style.display = 'block';
else e.style.display = 'none';}
</script>
edited, nonworking code
In default, both DIVs are hidden.
I require 'only 1 to be visible simultaneously.'
NOTE: the 2 ID info for the 2 divs are:
search
menu
I know the code below won't be sufficient even it was OK but can you tell me where am I wrong for the time being?
<script type="text/javascript">
function toggle_visibility(id)
{
var e = document.getElementById(id);
if (e == 'menu' && e.style.display == 'none')
{
e.style.display = 'block';
document.getElementById('search').style.display = 'none';
}
else if (e == 'search' && e.style.display == 'none')
{
e.style.display = 'block';
document.getElementById('menu').style.display = 'none';
}
}
</script>
Seems like you mean id, not e on lines 4 and 10
function toggle_visibility(id)
{
var e = document.getElementById(id);
if (id == 'menu' && e.style.display == 'none')
^^
{
e.style.display = 'block';
document.getElementById('search').style.display = 'none';
}
else if (id == 'search' && e.style.display == 'none')
^^
{
e.style.display = 'block';
document.getElementById('menu').style.display = 'none';
}
}

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.

Show/hide div's with javascript on a button press (and switch between the buttons)

I'm looking to make a button function to Show/hide div's with javascript and have the buttons switch between each other.
I can get them to show and hide but can't get the buttons to switch between each other without the other div showing.
<script type="text/javascript" language="javascript">
function showHide() {
var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
function showHide1() {
var ele = document.getElementById("showHideDiv1");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
<button onclick="return showHide();">box1</button>
<button onclick="return showHide1();">box2</button>
<div id="showHideDiv" style="display:none;">text1</div>
<div id="showHideDiv1" style="display:none;">text2</div>
If I got the question right, this might be of use
<script type="text/javascript" language="javascript">
function showHide() {
var ele = document.getElementById("showHideDiv");
var ele1 = document.getElementById("showHideDiv1");
ele1.style.display = "none";
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
function showHide1() {
var ele = document.getElementById("showHideDiv");
var ele1 = document.getElementById("showHideDiv1");
ele.style.display = "none";
if(ele1.style.display == "block") {
ele1.style.display = "none";
}
else {
ele1.style.display = "block";
}
}
</script>
<button onclick="return showHide();">box1</button>
<button onclick="return showHide1();">box2</button>
<div id="showHideDiv" style="display:none;">text1</div>
<div id="showHideDiv1" style="display:none;">text2</div>

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

Categories