javascriptjqueryhtml

Hide/Show Links in html

I want to show 2 links - Show and Hide. When I click on Show, Show should be hidden and Hide should be visible and when I click on Hide, Hide should be hidden and Show should be visible. How can I achieve this in html?

Solution

  • with jquery in the head

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>

    and an id for each button

    <input type='button' id='show' value='Show' />
<input type='button' id='hide' value='Hide' />

    you can do it something like this untested code...

    <script type='text/javascript'>
    $(function(){
        $('#show').click(function(){
            $('#hide').hide()
        })
        $('#hide').click(function(){
            $('#show').hide()
        })
    })
</script>