how hide temporary list items and after reappear, toggle button

**lse123** · 06-15-2012, 01:27 PM

how hide temporary list items and after reappear, toggle button? THE BELOW SEEMS DO NOT WORK, Well?

[code]<head>

<script type="text/javascript">

function action(x){
var parag=document.getElementById("li"+x);
if(parag.style.display=="none"){
parag.style.display="block";
}else{
parag.style.display="none";
}
}

</script>
</head>
<body>

<ul>
<li id="li1">Item1</li>
<li id="li2">Item2</li>
<li id="li3">Item3</li>
</ul>
<form name="myform"><input type="button" onclick="alert(document.myform.select.value);action(document.myform.select.value)" value="show/hide"/><label>
<select name="select" id="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</label></form>
</body>
</html>[code]

**ApacheTech** · 06-15-2012, 02:00 PM

This is not a true reply yet, just fixing your post to make it easier to debug.

HTML Code:

<head>
    <script type="text/javascript">

        function action(x) {
            var parag = document.getElementById("li" + x);
            if (parag.style.display == "none") {
                parag.style.display = "block";
            } else {
                parag.style.display = "none";
            }
        }

    </script>
</head>
<body>
    <ul>
        <li id="li1">Item1</li>
        <li id="li2">Item2</li>
        <li id="li3">Item3</li>
    </ul>
    <form name="myform">
    <input type="button" onclick="alert(document.myform.select.value);action(document.myform.select.value)"
        value="show/hide" /><label>
            <select name="select" id="select">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
        </label>
    </form>
</body>
</html>

An answer will be given shortly.

Thank you for your patience.

In the meantime, you may find this thread helpful:

http://www.dynamicdrive.com/forums/s...ad.php?t=69366

It seems to be in the same ballpark as you are after.

**ApacheTech** · 06-15-2012, 02:16 PM

FIXED!

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- Page Title -->
    <title>Hiding Selected List Items</title>
    <!-- Meta Block -->
    <meta content="text/html; charset=iso-8859-1" http-equiv="content-type" />
    <meta content="Hiding Selected List Items" name="description" />
    <meta content="Hiding, Selected, List, Items" name="keywords" />
    <meta content="all,index,follow" name="robots" />
    <meta content="noodp" name="msnbot" />
    <meta content="global" name="distribution" />
    <!-- Javascript Scripts -->
    <script type="text/javascript">

        function doSomething() {
            var x = document.getElementById('selItems').value;
            var parag = document.getElementById('li' + x);
            if (parag.style.display == 'none') {
                parag.style.display = 'block';
            } else {
                parag.style.display = 'none';
            }
        }

    </script>
</head>
<body>
    <div id="page">
        <ul>
            <li id="li1">Item1</li>
            <li id="li2">Item2</li>
            <li id="li3">Item3</li>
        </ul>
        <input type="button" onclick="doSomething();" value="Show / Hide" />
        <select id="selItems">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
    </div>
</body>
</html>

Your main problem was the handling of the form within the page. You don't need a form in this instance, nor do you need to pass any values into the javascript function you are calling. You can select the value from the DropDownBox by grabbing the whole element from the DOM Tree with document.getElementById(id);.

Thread: how hide temporary list items and after reappear, toggle button

Thread Tools

Search Thread

how hide temporary list items and after reappear, toggle button

The Following User Says Thank You to ApacheTech For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions