CODEWITHSUNDEEP
jquerytwitter-bootstrap-3
user3931756
user3931756

Reputation: 111

Make jquery button invisible after is clicked to toggle div

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.

Upvotes: 2

Views: 8093

Answers (5)

Rafik Bari
Rafik Bari

Reputation: 5037

<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>

Upvotes: 0

Pooya Estakhri
Pooya Estakhri

Reputation: 1289

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>

Upvotes: 0

scrowler
scrowler

Reputation: 24405

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.

Upvotes: 1

Charles Smartt
Charles Smartt

Reputation: 349

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();
})

Upvotes: 4

Rahul
Rahul

Reputation: 2307

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>

Upvotes: 0

Related Questions