CODEWITHSUNDEEP
jqueryhtml
user3858124
user3858124

Reputation: 15

Change a button to text button

I have a jQuery script that uses a button right now. I want the 'button' to be a line of text that reads "More" instead of the input type of button.

Right now my button is 

<input type="button" value="Show all" id="showAll" />

My jQuery is

$(window).ready( function() {
  $("#showAll").click(function () {
    $("#next40").slideDown(500);
    $(this).hide();
  });

  $("#hide").click(function () {
    $("#next40").slideUp(500, function () {
      $("#showAll").show();
    });
  });
});

Upvotes: 0

Views: 88

Answers (6)

Igwe Kalu
Igwe Kalu

Reputation: 14888

Either of the following would do:

<a href="" id=showAll">More</a>

or

<span id=showAll">More</span >

and then:

$(window).ready( function() {

    $("#showAll").click(function (e) {

        e.preventDefault(); // this is required if you're using an anchor element: <a>

        $("#next40").slideDown(500);
        $(this).hide();
    });

    $("#hide").click(function () {
    $("#next40").slideUp(500, function () {
        $("#showAll").show();
    });

});

If you don't prevent the default event handler from executing (when using an anchor element), the page will refresh.

Upvotes: 0

Hacketo
Hacketo

Reputation: 4997

You can just change the text of the button:

$("#showAll").attr("value","More");

and set it a class 

$("#showAll").addClass("more");

and add some css to set a special style to the button, to show it as simple text

.more{
    border:0px;
    background-color:rgba(0,0,0,0);
    ....
}

Upvotes: 0

Richie Fredicson
Richie Fredicson

Reputation: 2453

html

<div id="more">More</div>

jquery

$('#more').click(function(){
    alert('hi');
});

i guess this is what you require. here is a fiddle link

Upvotes: 0

baacke
baacke

Reputation: 810

Wrap your input button in a div or other container, then use the jQuery html() function to replace that button with your text.

HTML: 

<div id="toReplace">
    <input type="button" value="Show all" id="showAll" />
</div>

jQuery: 

$("#showAll").click(function () {
   $("#next40").slideDown(500);
   $(this).parent().html("More");
});

Upvotes: 3

G Duggan
G Duggan

Reputation: 28

Switch your HTML to a span instead of an input and everything should work:

<span id="showAll">More...</span>

Upvotes: 1

Bla...
Bla...

Reputation: 7288

You can use something like this:

$("#showAll").parent().append("<span>More</span>");

Upvotes: -2

Related Questions