html - using javascript to change display -

so looked @ other questions , found answer chosen on link:

toggle (show/hide) element javascript

this below following function works in answer change display.

function toggle(id) { var element = document.getelementbyid(id);    if (element) {     var display = element.style.display;      if (display == "none") {         element.style.display = "block";     } else {         element.style.display = "none";     }   } } 

i tried in code, it's not working. i've attached link jsfiddle @ end or post.

i have parent div id of #activities. contains multiple children, important ones li,p, , div has id #suggestion_input. below html.

html

<div id="activities" class="info_container">         <h1>our activities</h1>         <div class="contain">             <ul>                   <li>activity 1</li>                 <li>activity 2</li>                 <li>activity 3 </li>                 <li>activity 4 </li>                 <li>activity 5</li>                 <li>activity 6 </li>                 <li>activity 7</li>                 <li>your suggestions</li>             </ul>             <p>                  bacon ipsum dolor sit amet ribeye tenderloin meatball, chuck andouille beef ribs jerky ...             </p>             <div id="suggestion_input">                 <label for="name" >your name</label>                 <input type="text" id="name" name="name">                 <label for="email">email</label>                 <input type="email" id="email" name="email">                 <label for="suggestions">suggestions</label>                 <textarea id="suggestions" name="suggestions" rows="39"></textarea>             </div> 

when user clicks last li in ul called "your suggestions", p have display set none , #suggestion_input have display of inline-block. currently, css set inline-block , none respectively.

css

 #activities p{  display:inline-block;  width:500px;  vertical-align:top;  margin-top:20px;  margin-left:20px;  background:#fffda1;  }   #suggestion_input{  display:none;  margin-left:150px;  vertical-align:top;  margin-top:20px;  text-align:center;   } 

and javascript think reflects answer in link except isn't function.

javascript - code part of addeventlistener. event "click".

 if(e.target.innertext === 'your suggestions'){              var para = document.getelementbyid('activities').queryselector('p');             var display = para.style.display;             /* if uncomment this, following code work             outside of if display == 'inline-block' condition              para.style.display = 'none';             suggestion_input.style.display = 'inline-block';              */              if(display == 'inline-block'){                 // code not work                 para.style.display = 'none';                 suggestion_input.style.display = 'inline-block';                 console.log('works');             }         }else{             if(display == 'none'){                 display = "inline-block";             }         }     }  

when click, nothing happens. error because of condition in if statement of "display == 'none'" ?

here jsfiddle: http://jsfiddle.net/a4t7w/1/

okay, start, part of problem understanding para.style.display equals inline-block set in style sheet. unfortunately in usage javascript accessing inline styles defined element , not defining external css.

so statement: if(display == 'inline-block') never returns true because display set "". if aren't already, familiar firebug firefox. wonders helping debug kind of stuff.

another thing here: if(e.target.innertext === 'your suggestions'). instead of innertext should use innerhtml or textcontent. innertext property ie thing.

now, solve problem! see attaching click event <div> element holds <ul> element. if need click event function on "suggestions" <li> recommend isolate particular element when attaching listener.

change html , js:

<li id="suggestiontoggle">your suggestions</li> ... document.getelementbyid('suggestiontoggle').addeventlistener("click",function(e) ...  

next can rewrite javascript test presence of "" or inline-block when setting styles on <p> element. here's updated version of code:

document.getelementbyid('activities').addeventlistener("click",function(e) {     var suggestion_input = document.getelementbyid('suggestion_input');     var para = document.getelementbyid('activities').queryselector('p');     var light_green = document.getelementbyid('activities').queryselector('.light_green');         if(light_green){     light_green.style.backgroundcolor="red";     light_green.classname = "";     e.target.style.backgroundcolor = '#0dffb9';     e.target.classname = 'light_green'; } else {     e.target.style.backgroundcolor = '#0dffb9';     e.target.classname = 'light_green'; }  if(e.target.innerhtml == 'your suggestions') {            var display = para.style.display;                 if(display == 'inline-block' || display == "") {         // code not work ** now! **         para.style.display = 'none';         suggestion_input.style.display = 'inline-block';     } else {         if(display != "inline-block") {             para.style.display = "inline-block";             suggestion_input.style.display = "none";         }     } } else {             para.style.display = "inline-block";     suggestion_input.style.display = "none"; } 

});

js fiddle see toggle in action here: http://jsfiddle.net/ryuz5/8/

hope helps!

edit: enabled proper toggling accidentally stripped out noted yancie.