By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,118 Members | 1,134 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,118 IT Pros & Developers. It's quick & easy.

hide/show text area with textEditor depends on dropdown value

100+
P: 123
I use the NicEdit(www.nicedit.com) text-editor on my Text Area which is working and the below code to hide and show text area after selecting a value in the drop down it will show the text area but this is what i need help with:

1) i want the text area to show even before you select any value from the drop down.

2) i want the Text editor(NicEdit) to show on all the text area after selecting a value from the drop down to show the text area.

Js For Text-editor(Nicedit):
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="js/nicEdit.js"></script>
  2. <script type="text/javascript">
  3.     bkLib.onDomLoaded(function() {
  4.         new nicEditor({maxHeight : 200}).panelInstance('area');
  5.     });
  6. </script>
  7.  
Js to hide and show text area:
Expand|Select|Wrap|Line Numbers
  1.    <script type="text/javascript">
  2.         function showHide() 
  3.         {
  4.             if(document.getElementById("color_dropdown").selectedIndex == 1) 
  5.             {
  6.                 document.getElementById("hidden1").style.display = ""; // This line makes the DIV visible
  7.             } 
  8.             else {            
  9.                 document.getElementById("hidden1").style.display = "none"; // This line hides the DIV
  10.             }
  11.  
  12.             if(document.getElementById("color_dropdown").selectedIndex == 2) 
  13.             {
  14.                 document.getElementById("hidden2").style.display = ""; // This line makes the DIV visible
  15.             } 
  16.             else {            
  17.                 document.getElementById("hidden2").style.display = "none"; // This line hides the DIV
  18.             }
  19.  
  20.             if(document.getElementById("color_dropdown").selectedIndex == 3) 
  21.             {
  22.                 document.getElementById("hidden3").style.display = ""; // This line makes the DIV visible
  23.             } 
  24.             else {            
  25.                 document.getElementById("hidden3").style.display = "none"; // This line hides the DIV
  26.             }
  27.         }
  28.     </script>
  29.  
Html drop down:
Expand|Select|Wrap|Line Numbers
  1. <select name="menu"  id="color_dropdown" onchange="showHide()"> 
  2.                                                 <option>Select Meun</option>
  3.                                                 <option>One</option>
  4.                                                 <option>Two</option>
  5.                                                 <option>Three</option>
  6. </select>   
  7.  
  8. <textarea id="hidden1" name="area" display:none;"   id="area">ggggggggggggggggg</textarea>
  9. <textarea id="hidden2" name="area"  display:none;" id="area">hhhhhhhhhhhhhhhhh</textarea>
  10. <textarea id="hidden3" name="area"  display:none;"  id="area">yyyyyyyyyyyyyyyyy</textarea>
  11.  
Jul 13 '13 #1
Share this question for a faster answer!
Share on Google+

Post your reply

Sign in to post your reply or Sign up for a free account.