Make jquery button invisible after is clicked to toggle div

Question

The code I am using is for toggling button to reveal a div is below:

<button href="#" class="btn btn-danger" onclick="$('#target').toggle();">
    <b><font size="6">LOAD MORE</font></b>
</button>

I want it to become invisible once it is clicked to reveal div - I understand to see it page must be reloaded. I am not sure what to add.

Answer 1

http://jsfiddle.net/qp13zn9s/1/

Here is some sample HTML:

<button id="theButton">ClickMe</button>
<div id="theDiv" style="display:none;"><p>So text</p></div>

And here is the JavaScript using JQuery:

$("#theButton").click(function(){
    $("#theButton").hide();
    $("#theDiv").show();
})

Answer 2

Separate out your event handler and HTML for clarity:

<button type="button" class="btn btn-danger mybutton">
    <strong><span style="font-size: 2em">LOAD MORE</span></strong>
</button>

Then jQuery:

$(function() {
    $('.mybutton').click(function(e) {
        // do stuff
        $('#target').show();
        $(this).hide();
    });
});

Notes:

1. I've replaced the font tag with a span (font tag is not supported in HTML5).
2. href is an attribute for a tags, you're using a button so define the type of it instead of the href.
3. Use .toggle() if you have the possibility to show this button again, or if the div can be shown by another method other than this button. If it's only a one way hide on each page view, a simple .show() will do since it can't be hidden again.

Answer 3

its really easy use this code first add another id or class for your button because by choosing btn btn-danger all btn btn-danger buttons will get hidden for example if you add id "loadmore" your code will be something like this

    <button href="#" id="loadmore" class="btn btn-danger" onclick="$('#target').toggle();">
        <b><font size="6">LOAD MORE</font></b>
    </button>

<script>
    $('#loadmore').click(function(){

    ////// code to show more

    $('#loadmore').hide(); //// u can use other functions too

    });
    </script>

any way i recommend you to use the code bellow (its clearer)

<style>
    button#loadmore{
        font-size: 60px;
        font-style: bold;
    }
</style>

<script>
    $(document).ready(function(){

        $('#loadmore').click(function(){
            $('#target').toggle();

            $('#loadmore').hide(); //// u can use other functions too

        });

    });
</script>

<button href="#" id="loadmore" class="btn btn-danger"> LOAD MORE </button>

Answer 4

<script type="text/javascript">

$(document).ready(function() {
$("button.exampleClass").click(function() {
$(this).hide();
$("#target").toggle();
});
});

</script>

Don't forget to call jquery before you use the code above.

And you html

 <button href="#" class="btn btn-danger exampleClass">
 <b><font size="6">LOAD MORE</font></b>
 </button>

Answer 5

Use the following JS fiddel code reference for your better understanding & you can play with it.

In your example you haven't given code for target button but in the above linked example you can see that.

Here is my code::

<button href="#" class="btn btn-danger" onclick="$('#target').toggle();">
    <b><font size="6">LOAD MORE</font></b>
</button>

<button id="target">Target</button>