hide/show text area with textEditor depends on dropdown value

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • simon2x1
    New Member
    • Dec 2008
    • 123
    #1

    hide/show text area with textEditor depends on dropdown value

    I use the NicEdit(www.nic edit.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) :
    Code:
    <script type="text/javascript" src="js/nicEdit.js"></script>
<script type="text/javascript">
    bkLib.onDomLoaded(function() {
        new nicEditor({maxHeight : 200}).panelInstance('area');
    });
</script>
    Js to hide and show text area:
    Code:
       <script type="text/javascript">
        function showHide() 
        {
            if(document.getElementById("color_dropdown").selectedIndex == 1) 
            {
                document.getElementById("hidden1").style.display = ""; // This line makes the DIV visible
            } 
            else {            
                document.getElementById("hidden1").style.display = "none"; // This line hides the DIV
            }

            if(document.getElementById("color_dropdown").selectedIndex == 2) 
            {
                document.getElementById("hidden2").style.display = ""; // This line makes the DIV visible
            } 
            else {            
                document.getElementById("hidden2").style.display = "none"; // This line hides the DIV
            }

            if(document.getElementById("color_dropdown").selectedIndex == 3) 
            {
                document.getElementById("hidden3").style.display = ""; // This line makes the DIV visible
            } 
            else {            
                document.getElementById("hidden3").style.display = "none"; // This line hides the DIV
            }
        }
    </script>
    Html drop down:
    Code:
    <select name="menu"  id="color_dropdown" onchange="showHide()"> 
                                                <option>Select Meun</option>
                                                <option>One</option>
                                                <option>Two</option>
                                                <option>Three</option>
</select>   

<textarea id="hidden1" name="area" display:none;"   id="area">ggggggggggggggggg</textarea>
<textarea id="hidden2" name="area"  display:none;" id="area">hhhhhhhhhhhhhhhhh</textarea>
<textarea id="hidden3" name="area"  display:none;"  id="area">yyyyyyyyyyyyyyyyy</textarea>
    Tags: None
    • Sherin
      New Member
      • Jan 2020
      • 77
      #2
      Try This Code

      Code:
      <html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Elements Using Select Box</title>
<style>
    .box{
        color: #fff;
        padding: 20px;
        display: none;
        margin-top: 20px;
    }
    .red{ background: #ff0000; }
    .green{ background: #228B22; }
    .blue{ background: #0000ff; }
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("select").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});
</script>
</head>
<body>
    <div>
        <select>
            <option>Choose Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <div class="red box">You have selected <strong>red option</strong> so i am here</div>
    <div class="green box">You have selected <strong>green option</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue option</strong> so i am here</div>
</body>
</html>

        Comment

        Previous template Next
        Working...