Question

I’ve got a button updateLogButton when clicked shows the div and when clicked again hides it. I’ve got this part working. Only problem is everytime the button is clicked focus is moved to the beginning of the page instead of focusing on the content in the div.

JQuery code:

    //hide div on page load
$('#updateLogText').hide();

$('#updateLogButton').click(function() {

    if ($('#updateLogText').is(':visible')){

        //hide div if content is visible
        $('#updateLogText').fadeOut();

    }else{

        $('#updateLogText').fadeIn();       
    }

});

HTML code:

<tr>
    <td><a href="#"  id="updateLogButton">Update Log</a></td>
</tr>
<tr>
    <td colspan="3" >
        <div id="updateLogText" style="width:100%;">
            <?php echo $data['updates']; ?>
        </div>

    </td>
</tr>

Anybody know how this can be achieved? i have looked at the JQuery documentation and tried:

$("#updateLogText").focus();
$("#updateLogText").attr("tabindex",-1).focus();

The above doesn’t work..

Answer 1

It’s because the <a href="#" remove # or the href attribute itself

Write it as –

<a id="updateLogButton">Update Log</a>

css –

a{ cursor: pointer; }