Question

I am trying to change the text when the user clicks but does not seems to work ..below is the code.

not working sample: http://jsfiddle.net/3jt3P/1/

<a href="#" class="slide" onclick="firstclick();">Show First</a> ... 
<a href="#" class="slide1" onclick="secondclick();">Show Second</a>

<div id="one" class="content">one</div>
<div id="second" class="content">two</div>


<script type="text/javascript">

        function firstclick() { 
            $('#second').hide();
            $('#one').slideToggle(400, function () {
                debugger
                if ($(this).is(":visible")) {
                    $('.slide > a').text('Hide First');
                    $('.slide1 > a').text('Second');
                }
                else {
                    $('.slide > a').text('First');
                } 
            });
            return false;

        } 
        function secondclick() { 
            $('#one').hide();
            $('#second').slideToggle(400, function () {

                if ($(this).is(":visible")) {
                    $('slide1 > a').text('Hide Second');
                    $('slide > a').text('First');
                }
                else
                    $('slide1 > a').text('First');

            });
            return false;
        } 

        $(document).ready(function () {
            // Hide the "view" div.
            $('#one').hide();
            $('#second').hide();

        });
    </script>

Answer 1

I would approach this slightly differently; markup your links with data-* attributes and use just one event handler to control them showing/hiding of the associated content.

Make your markup something like:

<a href="#" class="slide" data-content="#one" data-text="first">Show first</a>
<a href="#" class="slide" data-content="#second" data-text="second">Show second</a>

<div id="one" class="content">one</div>
<div id="second" class="content">two</div>

Notice ive added 2 attributes:

• data-content contains the id of the associated content
• data-text contains the suffix used in the link.

Ive also changed both links to have the same class – this could be anything but allows me to target the links so I can attach the same behaviour:

$('.slide').on("click",function(){
    var $link = $(this);
   var contentid = $link.data('content');
    $('.slide').not($link)
               .filter(function(){ return $(this).data('contentvisible');})
               .trigger('click');
    $(contentid).slideToggle(400,function(){
        if($(this).is(':visible')){
            $link.data('contentvisible',true).text('Hide ' + $link.data('text'));
        }
        else{
           $link.data('contentvisible',false).text('Show ' + $link.data('text'));                
        }
    });
});
$('#one').hide();
$('#second').hide();

Live example: http://jsfiddle.net/htn3S/1/

Edit: Ive update the above to include the functionality of hiding other visible elements before showing one.