Show or Hide the visibility of specific div with two links

Question

I have a javascript function which toggle the visibility of a form.

<script type="text/javascript">
function showHide(){
    var toggle = document.getElementById('form');
    if(toggle.style.display == 'none')
         toggle.style.display = 'block';
    else
         toggle.style.display = 'none';
}
</script>

It is working fine with this link.

<a href="#" onclick="showHide()">Add new:</a>

But when I use this function in this link, it's not working. On clicking this link, page reloaded and hidden content is not displaying.

<a href="products.php?act=edit&id=1" onclick="showHide()">Edit</a>

Here is demo: products.php

I want same working of both "Add new:" & "Edit" links to show or hide the form with out reloading the page.

What did you expect ? You're linking to a page so you replace the content of the current one, the script is lost. — Denys Séguret, Dec 31 '12 at 08:53
use PHP instead; set a SESSION variable or a GET variable that will work from page to page. — bozdoz, Dec 31 '12 at 08:57
@dystroy These links are on same page(products.php) for same hidden content. I want when I click on "Add new" or on "Edit", it show me the hidden content. but when I click on "Edit" It reloads the page and not showing the content. — Moeen, Dec 31 '12 at 08:58
Change Edit to Edit Although I'm not sure about what you are trying to achieve. — saibotd, Dec 31 '12 at 08:59

score 3 · Answer 1 · answered Dec 31 '12 at 08:57

3

as vatiant you can go this way:

<script type="text/javascript">
function showHide(){
    var toggle = document.getElementById('form');
    if(toggle.style.display == 'none')
         toggle.style.display = 'block';
    else
         toggle.style.display = 'none';
    document.location.href = 'http://yourdomain.com/products.php?act=edit&id=1'; //<<<<
}
</script>


<a href="#" onclick="showHide()">Add new:</a>

but do not understan for what =)

answered Dec 31 '12 at 08:57

Subdigger

2,166
3
20
42

I realise it's not required for single-line statements, but using curly-braces is good practice, especially when advising someone unused to JavaScript (if only to prevent the *next* question being "my `if` was working, now it's not..! *Why?*" when things are updated/amended). Also: `toggle.style.display = toggle.style.display == 'block' ? 'none' : 'block';` condenses things a little. =) – David Thomas Dec 31 '12 at 09:12

score 1 · Answer 2 · edited May 23 '17 at 11:56

If you're linking to another page / reloading the current page (which causes all state to be lost) then you need some way of passing the visibility of your div into the new page. You could

<a href="products.php?act=edit&id=1&visible=formVisible" onclick="showHide()">Edit</a>

You would need to set the formVisible value in your toggle function, or dynamically modify the links... there are many ways you could accomplish that.

As a side note you should use the triple equals in javascript

if(toggle.style.display === 'none')

KooiInc · Accepted Answer · 2012-12-31T10:30:20.137

First, you can simplify the function:

function showHide(){
    var toggleStyle = document.querySelector('#form').style;
    toggleStyle.display = toggleStyle.display ? '' : 'none';
}

See this jsfiddle

Second, your click-action does work, but because the href triggers a page refresh, it's not visible. If you want to use showHide, you could add a parameter to the href, something like: <a href="products.php?act=edit&id=1&showform=1">, and use the showform value on page load to trigger visibility. Alternatively you could use a cookie to 'remember' the form display state. A third alternative would be to use XmlHTTPRequest (XHR, aka Ajax), to prevent a page refresh.

Show or Hide the visibility of specific div with two links

3 Answers3