<script type="text/javascript">
  // <![CDATA[
    $(document).ready(function() {

    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.upload_options li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content

    //On Click Event
    $("ul.upload_options li").click(function() {

        $("ul.upload_options li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content

        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
      });

    //Hide (Collapse) the toggle containers on load
    $(".toggle_container").hide(); 

    //Switch the "Open" and "Close" state per click then slide up/down (depending on open/close state)
    /*$("a.trigger").click(function(){
      $(this).toggleClass("active").next().slideToggle("fast");
      return false; //Prevent the browser jump to the link anchor
    });*/

    $("a.trigger").click(function(){
      var $next = $(this).next();

      //close and deactivate everything else
      $('a.trigger').not(this).removeClass('active');  //deactivate all .trigger buttons except current
      $('.toggle_container.active_toggle').not($next.get(0))
        .slideUp()
        .removeClass('active_toggle');  //close all active containers except the current and deactivate

      //now deal with the current item (toggle)
      $(this).toggleClass("active");
      $next.slideToggle("medium").toggleClass('active_toggle');

      return false; //Prevent the browser jump to the link anchor
    });
  // ]]>
    </script>

    <div id="tab_container"<? if (isset($lang)) { echo ' class="'.$lang.'"'; } ?>>
        <div class="btn_local"><a class="local" id="linklocal" style="display: none;"></a></div>
        <div class="btn_remoto"><a class="remota" id="linkremota"></a></div>
    </div>

<ul class="upload_options">
    <li class="local"><a href="#local">Local</a></li>
    <li class="remote"><a href="#remote">Remote</a></li>
</ul>

    <div id="contenedorupload">
        <div id="subir_local">
            <h2 id="chooselocal"><?php echo TXT_LOCAL;?></h2>
            <div class="inputs"><input name="fileup" type="file" size="60" id="localUP" onclick="javascript:document.getElementById('remotaUP').value = '';"/></div>
        </div>
        <div id="subir_remota" style="display: none;">
            <h2 id="chooseremota"><?php echo TXT_REMOTE;?></h2>
            <div class="inputs"><input name="remota" size="60" id="remotaUP" onclick="javascript:document.getElementById('localUP').value = '';"/></div>
        </div>
    </div>

<div class="toggle_container pref">
<div id="local" class="tab_content">
            <h2 id="chooselocal"><?php echo TXT_LOCAL;?></h2>
            <div class="inputs"><input name="fileup" type="file" size="60" id="localUP" onclick="javascript:document.getElementById('remotaUP').value = '';"/></div>
        </div>
<div id="remote" class="tab_content">
            <h2 id="chooseremota"><?php echo TXT_REMOTE;?></h2>
            <div class="inputs"><input name="remota" size="60" id="remotaUP" onclick="javascript:document.getElementById('localUP').value = '';"/></div>
        </div>
    </div>

<li class="custom"><a href="#custom">customtab</a></li>

<div id="custom" class="tab_content">content here </div>