JAVASCRIPT: Toggle within Toggle not working issue

Question

I am a newbie, I have two toggle (will soon be 4 toggles). They work perfectly fine when they are separate but once i put them inside of one and other only one toggle works.

After a bit of research i found that adjustments must be made to my javascript, but cannot find how to do this anywhere on the web.I have found this jQuery code, that does exactly what i want to do. But because i am using a string (printing out echo's from a DB) to create my HTML, jQuery does not Seem to work. Therefore i am using Javascript, I was wondering is there is anything similar to this in Javascript.

http://jsfiddle.net/ufC5B/2/

My code

             //toggle and change bg colour
        function toggle_visibility(id) {
            var e = document.getElementById(id);
            if (e.style.display == "block" || e.style.display == "") {
                e.style.display = "none";

            } else {
                e.style.display = "block";
                text.innerHTML = "-";

            }
        }

PHP

  echo("<button id='onclick' onclick='toggle_visibility(\"tog$i\")'> " . $_SESSION['Food_Cat_name'] . " </button>");

        echo("<div id='first_product'>");

        echo("<div id='tog$i' class ='hidden'>");

        echo("<div id='red_head'>");
        echo("<p id='menu_title'>  " . $_SESSION['Food_Cat_name'] . " </p>");
        echo("</div>");

        echo("<p >Menu Item</p>");

        //echo("<input type='button' id='new_item' value='Add new item to " . $_SESSION['Food_Cat_name'] . "' name='new_item'>");
        echo("<button id='new_item$i' onclick='toggle_visibility(\"p_form$i\")' name='new_item'>Add new item to " . $_SESSION['Food_Cat_name'] . "</button>");

        echo("<div id='p_form$i' class ='hidden'>");

        echo("<input type='text' id='prod_name' name='prod_name' value=''>");
        echo("<br>");
        echo("<textarea id='desc' name='desc' placeholder='Item description' rows='4' maxlength='200'  required ></textarea>");
        echo("<br>");
        echo("<input type='text' id='price' name='price' value=''>");
        echo("</div>");

        echo("</form>");

Rendered

           //toggle and change bg colour
            function toggle_visibility(id) {
                var e = document.getElementById(id);
             
                if (e.style.display == "block" || e.style.display == "") {
                    e.style.display = "none";
                 
                } else {
                    e.style.display = "block";
                    text.innerHTML = "-";

                }
            }

.hidden {
    display: none; 
}

           <button id='onclick' onclick='toggle_visibility("tog")'> " . $_SESSION['Food_Cat_name'] . " </button>

            <div id='first_product'>");

            <div id='tog' class ='hidden'>

            <div id='red_head'>
            <p id='menu_title'>  " . $_SESSION['Food_Cat_name'] . " </p>
            </div>

            <p >Menu Item</p>

           
            <button id='new_item' onclick='toggle_visibility("p_form")' name='new_item'>Add new item to " . $_SESSION['Food_Cat_name'] . "</button>
            
            <div id='p_form' class ='hidden'>
        
            <input type='text' id='prod_name' name='prod_name' value=''>
            <br>
            <textarea id='desc' name='desc' placeholder='Item description' rows='4' maxlength='200'  required ></textarea>
            <br>
            <input type='text' id='price' name='price' value=''>
            </div>
          
            </form>

Please be more specific in your explanation.Try to show rendered html or view in browser and explain what you really want.I don't understand why you are telling jquery is not going to work.From where does that 'switchTextDiv' variable came from. — Kiran Muralee
– Kiran Muralee, Commented Apr 17, 2016 at 16:41
@KiranMuralee so sorry i was trying to be. here is an example of what i am trying to achieve jsfiddle.net/ufC5B/2 — Monroe
– Monroe, Commented Apr 17, 2016 at 16:47
ok so when the button with id 'onclick' is clicked you want the div with id='tog$i' to toggle and also on clicking button with id='ew_item$i'.you want div with id 'p_form$i' to toggle right. — Kiran Muralee
– Kiran Muralee, Commented Apr 17, 2016 at 16:50

Kiran Muralee · Accepted Answer · 2016-04-17 17:07:37Z

1

I have noticed your js function and the problem is in the line 'text.innerHTML = "-";'.Please remove that.If you are using jquery,you can achieve your functionality by just giving the code $("#"+id).toggle() instead of

var e = document.getElementById(id);
            if (e.style.display == "block" || e.style.display == "") {
                e.style.display = "none";

            } else {
                e.style.display = "block";
                text.innerHTML = "-";

            }

answered Apr 17, 2016 at 17:07

Kiran Muralee

2,0802 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Monroe Over a year ago

You have been very helpful. Thank you very much

Collectives™ on Stack Overflow

JAVASCRIPT: Toggle within Toggle not working issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related