No text change of anchor on toggle

Question

No text change of anchor on toggle please provide me some suggestion

Html:

<a href="#" onclick="javascript:showHide('flight_<?php echo $flightlist->id ?>'); class="fnt-size12">+Flight Details</a>

<div id="flight_<?php echo $flightlist->id; ?>" class="minDetailBox addmarginB10 borT">
   <div class="col1">
      <div class="padding">
         <div class="airLogo"> <span class="airSprites LS2">&nbsp;</span>
            <p>JET Lite</p>
         </div>
      </div>
   </div>
</div>

Script:

function showHide(id) {       
   var minDetails = document.getElementById(id);        
   $(minDetails).toggle('slow');
  ($(this).text() === "+Flight Details") ? $(this).text("-Flight Details") :  $(this).text("+Flight Details");      
   return false;
}

Answer 1

Pass your element as well like onClick="return showHide('flight1',this)"

function showHide(id,element) {       

   var minDetails = document.getElementById(id);        

   $(minDetails).toggle('slow');

   ($(element).text() === "+Flight Details") ? 
               $(element).text("-Flight Details") :  
               $(element).text("+Flight Details");      

   return false;
}

Answer 2

You can try something like this

<a href="#" onClick="return showHide('flight1', this);" class="fnt-size12">+Flight Details</a>

function showHide(id, link) {       
    $('#' + id).toggle('slow');
    ($(link).text() === "+Flight Details") ? $(link).text("-Flight Details") : $(link).text("+Flight Details");
    return false;
}

Answer 3

<a href="#" id="flight1" class="toggle fnt-size12">+Flight Details</a>

jQuery('a.toggle')
    .click(function(e) {
        var id = jQuery(this).attr('id');

        jQuery('#'+id).toggle('slow');
        if(jQuery('#'+id).css('display') == 'none') {
            jQuery(this).html("+Flight Details");
        } else {
            jQuery(this).html("-Flight Details");
        }

        e.preventDefault();
    });

Answer 4

You can do this as below,

jQuery Code

$(function()
{
    $('div[id^="flight_"]').hide();
    $(document).on('click','.fnt-size12',function(e)
    {
        e.preventDefault();
        var $that = $(this);

        $(this).next('#flight1').toggle();
        if($that.html() == '+Flight Details') {
            $that.html('-Flight Details');
        } else {
            $that.html('+Flight Details');
        }

    })
});

Your HTML

<a href="#" class="fnt-size12">+Flight Details</a>

<div id="flight1" class="minDetailBox addmarginB10 borT">
   <div class="col1">
      <div class="padding">
         <div class="airLogo"> <span class="airSprites LS2">&nbsp;</span>
            <p>JET Lite</p>
         </div>
      </div>
   </div>
</div>

See i have modified your HTML code and added new few lines of jQuery code.