reset .toggle within a function

I'm using show and hide in jQuery. Basically on my page I have many classes (not a unique ID) and they all have a show and hide feature on them. However this content is also hidden and shown when an element in a drop down is selected.

So this means I have 2 JavaScript functions set up. 1 to show and hide based on the drop down and another to show and hide when you click a link.

The problem I'm having is that the link text rotates based on if the div is open or closed using .toggle. If I select option 1 in the dropdown and open the div the toggle works fine. But if you select a different option in the dropdown and then toggle the link text it gets confused and shows the wrong text.

I need to be able to reset the toggle to hidden when the drop down is used but I've been trying for the last few days and can't seem to get it to work!

Here is the jquery code:

The first function is for the dropdown show and hide, the second is for the onclick show and hide.

$(document).ready(function(){
    $('.box').hide();
    $('#dropdown').change(function() {
    $('.box').hide();
    $('#div' + $(this).val()).show();
    $('.redbox').hide();    


 });
});

$(document).ready(function(){

        var showText='Account details'; //Closed text variable
        var hideText='Account details'; //Open text variable

        var is_visible = fal开发者_开发技巧se;

        $('.redbox').prev().append(' <a href="#" class="toggleLink copyLink" >'+showText+'</a>');
        $('.redbox').hide();

        $('a.toggleLink').click(function() {
            is_visible = !is_visible;
        $(this).html( (!is_visible) ? showText : hideText);

        $(this).parent().next('.redbox').toggle();

        return false;

    });
    });

The HTML code is rather long so I've simplified it a little, we also loads a shed load of other dynamic JavaScript properties. This code is used for each element in the drop down.

<a href="#" class="toggleLink copyLink"></a>.

<div class="redbox redbox_scroller_sav">

   <div id="coda-nav-1" class="coda-nav">
       <ul>
    <li><a href="#1">Pane 1</a></li>
    <li><a href="#2">Pane 2</a></li>
       </ul>
</div>

<div class="coda-slider preload" id="coda-slider-1">
    <div class="panel">
        <div class="panel-wrapper">
                Pane 1 text
        </div>
    </div>

    <div class="panel">
        <div class="panel-wrapper">
                Pane 2 text
        </div>
    </div>
</div><!-- /coda-slider -->

</div><!-- /redbox div -->

I hope that someone will be able to help me out! Thanks in advance

I'm not entirely sure of what your code is doing, but .toggle() has an optional parameter. If it is true, you will show the selection; if it is false, it will hide the selection.