Reputation: 15
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
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
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
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
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
Reputation: 28
Switch your HTML to a span instead of an input and everything should work:
<span id="showAll">More...</span>
Upvotes: 1
Reputation: 7288
You can use something like this:
$("#showAll").parent().append("<span>More</span>");
Upvotes: -2