Question

I’m trying to get the following jquery toggle to work on IE, FF, and as many browsers as possible, but currently it works only on FF. Here, I’ve got the toggle available (between drop-down select and textarea) only when a certain option is selected (“bbb” in this case). Also, is there a better way to write the same script (a cleaner way, may be)?. Click here to check out what I’ve got right now.
Many thanks in advance.

$(document).ready(function() {
    $("#link a").hide();
    if ($("#sel").val() == 'bbb') $("#link a").show();
    $("#sel_id").change(function() {
        if ($("#sel").val() == 'bbb') {
            $("#link a").show();
        } else {
            $("#link a").hide();
            $("#link").show();
        }
    });

    $('#txtbox').hide();
    $('#link a').click(function() {
        $('#txtbox').slideToggle();
        $(this).text($(this).text() == "(Another input option)" ? "(Method 1)" : "(Another input option)");
        $('#sel_id').show();
        if ($('#link a').text() == '(Method 1)') {
            $(this).prev('div').hide();
            $('#link').prev().remove('div');
            $('#link').before("<div>This is another input option</div>");
            $('#sel_id').hide();
            $('#cp').val('');
            $('#sel').val('');
        } else {
            $('#link').prev().remove('div');
            $('#link').before("<div>Method 1</div>");
        }
        $("#len").val('None');
        return false;
    });
});



  <div id="link">
       <div>Method 1</div><a href="#">(Another input option)</a>
   </div>
   <div id="sel_id">
       <select id="sel" name="sel">
            <option value="None" selected></option>
            <option value="aaa">aaa</option>
            <option value="bbb">bbb</option>
        </select>
   </div>

   <div id="txtbox">
       <div style="margin-top: 5px;" class="tab">copy and paste:<br />
            <textarea rows="5" cols="64" id="cp" name="cp"></textarea>
        </div>
    </div> 

Answer 1

I think you could clean it up by using a little more HTML and then just using the JS to hide/show the desired bits.

<div id="select">
   <div class="label">Method 1<a href="#">(change me)</a></div>
   <select id="sel" name="sel">
     <option value="None" selected></option>
     <option value="aaa">aaa</option>
     <option value="bbb">bbb</option>
   </select>
</div>
<div id="textbox">
   <div class="label">Method 2<a href="#">(change back)</a></div>
   <div style="margin-top: 5px;" class="tab">copy and paste:</div>
   <textarea rows="5" cols="64" id="cp" name="cp"></textarea>
</div> 

Then for the javascript:

$(function() {
   $("#select a, #textbox").hide();
   $("#sel").change(function() {
      if ($("#sel").val() == 'bbb') {
         $("#select a").show();
      } else {
         $("#select a").hide();
      }
   });
   $(".label a").click( function(e) {
      e.preventDefault();
      $("#select, #textbox").slideToggle();
   });
});

While working this up, I noticed a couple things that might cause other browsers to choke.

1) $(“#len”).val(‘None’);
There’s no element with that id.

2) $(“#sel_id”).change
This should probably be “#sel” (the select control) instead of “#sel_id” (the div) – some browsers may not recognize the “change” event on a div.