How do I perform a jQuery 'slidetoggle' effect using a hyperlink, instead of an input button, as the action item?
At the jQuery reference page
It only gives an example of using a form input button.
I would like to have instead of a button, a hyperlink to be the toggle clickable action.
$("#anch").click(function () {
$("#para1").slideToggle("slow");
});
<a id='anch'>Toggle</a>
<p id='para1'>
This is the paragraph to end all paragraphs. You
should feel <em>lucky</em> to have seen such a paragraph in
your life. Congratulations!
</p>
If you have a link like so:
<a id="toggleLink" href="#">CLICK ME!</a>
Just use the following function to slideToggle your div
$("#toggleLink").click(function () {
$("#myDiv").slideToggle("slow");
});
In addition to the other answers, if your hyperlink has an href attribute (which it should, so it will be displayed as a link), you may want to neutralize it by returning false on your event handler (if you don't, the page will scroll up when you click on the link):
$('a').click(function(){
$('p').slideToggle();
return false;
});
Other than that, there shouldn't be any difference between a button and an hyperlink. While you're reading the documentation, you'd be wise to start with jQuery's Selectors.
Related
I have a text bounded by anchor tag. As soon as the user click it, it should toggle between two texts.
I have knowledge on how to toggle a button in JQuery, but don't know how do I implement it with link.
<h1>Questions and Answers</h1>
<p>First Question: What is the capital of Germany?
<br>
<i>Click <b><a id="toggle_this"></a>Here</a></b> to show/hide answer!</i>
</p>
<p>Answer: Berlin.</p>
<script>
$(document).ready(function() {
$("toggle_this").click(function() {
$(this).hide();
});
});
</script>
First change id to class="toggle_this". Then use selector .toggle_this.
Then you can use e.preventDefault() to stop the default action if the link.
Then using closest() and next() you can get the answer <p> then toggle() it.
$(".toggle_this").click(function (e) {
e.preventDefault();
$(this).closest('p').next().toggle();
});
you could do this using jQuery (you can also use plain ol' JS, but it looks like you're using jQuery from before), using the .on method.
Although, I would first recommend you adding a class/id to the answer, so it's a bit cleaner:
$(document).ready(function () {
$('#toggle_this').on('click', function (event) {
event.preventDefault();
$('#answer').toggle();
});
});
EDIT: event.preventDefault() prevents the anchor tag from navigating to the href, and .on registers an event handler, so that the function specified is executed when the event triggers.
First you have a stray closing anchor </a> tag before the 'Here'.
Also i'd give the <p> your trying to hide an id eg. <p id="answer">.
Update the jQuery to this.
$(document).ready(function() {
$("#answer").hide();
$("#toggle_this").click(function() {
$("#answer").toggle();
});
});
I use disqus in my news site for comments, i put disqus div as display:none, i want that the user have to do click in a button for show and hide this div.
I did a script in jQuery doing toggle in this button, and I can hide and show the div, but when it shows, does not focus on the div, but this is where the button.
This is not useful since pressing the button should take the user to the section where comment, but does not.
script:
$(document).ready(function(){
$('.gn-icon-bubble').attr("href","#foot").click(function(){
$('.disqus_thread').toggle('swing');
});
});
.gn-icon-bubble is the button and as you know, .disqus-thread is the div's class; #foot is my anchor, are in the main page's footer, but still don't works.
I've tried using anchors, but gives the same, still focus comments. I really appreciate your help.
Use Event Delegation for dynamically change element ,use preventDefault to stop default action
$(document).ready(function(){
$('.gn-icon-bubble').attr("href","#foot");
$(document).on("click", ".gn-icon-bubble[href=#foot]" , function(event){
// event.preventDefault(); If you want to stop default anchor tag click action
$('.disqus_thread').toggle('swing');
});
});
Try this:
$('.gn-icon-bubble').click(function() {
$('.disqus_thread').toggle('swing',function() {
$('#foot').focus();
});
return false;
});
Trying to figure out proper way to make a click event not fire on the icon of a disabled link. The problem is when you click the Icon, it triggers the click event. I need the selector to include child objects(I think) so that clicking them triggers the event whenever the link is enabled, but it needs to exclude the children when the parent is disabled.
Links get disabled attribute set dynamically AFTER page load. That's why I'm using .on
Demo here:(New link, forgot to set link to disabled)
http://jsfiddle.net/f5Ytj/9/
<div class="container">
<div class="hero-unit">
<h1>Bootstrap jsFiddle Skeleton</h1>
<p>Fork this fiddle to test your Bootstrap stuff.</p>
<p>
<a class="btn" disabled>
<i class="icon-file"></i>
Test
</a>
</p>
</div>
</diV>
$('.btn').on('click', ':not([disabled])', function () { alert("test"); });
Update:
I feel like I'm not using .on right, because it doesn't take the $('.btn') into account, only searching child events. So I find myself doing things like $('someParentElement').on or $('body').on, one being more difficult to maintain because it assumes the elements appear in a certain context(someone moves the link and now the javascript breaks) and the second method I think is inefficient.
Here is a second example that works properly in both enabled/disabled scenarios, but I feel like having to first select the parent element is really bad, because the event will break if someone rearranges the page layout:
http://jsfiddle.net/f5Ytj/32/
Don't use event delegation if you only want to listen for clicks on the .btn element itself:
$('.btn').on('click', function() {
if (!this.hasAttribute("disabled"))
alert("test");
});
If you'd use event delegation, the button would need to be the matching element:
$(someParent).on('click', '.btn:not([disabled])', function(e) {
alert('test!!');
});
Demo
Or use a true button, which can really be disabled:
<button class="btn" [disabled]><span class="file-icon" /> Test</button>
Demo, disabled.
Here, no click event will fire at all when disabled, because it's a proper form element instead of a simple anchor. Just use
$('.btn').on('click', function() {
if (!this.disabled) // check actually not needed
this.diabled = true;
var that = this;
// async action:
setTimeout(function() {
that.disabled = false;
}, 1000);
});
.on('click', ':not([disabled])'
^ This means that, since the icon is a child of the button ".btn", and it is not disabled, the function will execute.
Either disable the icon, also, or apply the event listener only to the <a> tag that is your button, or use e.stopPropagation();
I would suggest using e.stopPropagation();, this should prevent the icon from responding to the click.
That doesn't seem to work for me ^
Disabling the icon, however, does.
I would prefer to add the event using delegation here as you are trying to base the event based on the attributes of the element.
You can add a check condition to see if you want to run the code or not.
$('.container').on('click', '.btn', function() {
if( $(this).attr('disabled') !== 'disabled'){
alert('test!!');
}
});
Check Fiddle
You're not using the selector properly.
$('.btn').not('[disabled]').on('click', function () {
alert("test");
});
See it live here.
Edit:
$('.container').on('click', '.btn:not([disabled])', function () {
alert("test");
});
I think what you need is:
e.stopPropagation();
See: http://api.jquery.com/event.stopPropagation/
Basically something like the following should work
$('.icon-file').on('click', function(event){event.stopPropagation();});
You may want to add some logic to only stop bubbling the event when the button ist disabled.
Update:
not sure, but this selector should work:
$('.btn:disabled .icon-file')
How could one trigger the default action/event of a HTML link (anchor element)? That is to use JavaScript/jQuery to "click" an existing HTML link, as if the user has clicked it.
Just using .click() does not seem to work.
$('#alink').click();
// the nothing happening
For this HTML:
<a id="alink" href="http://google.com" target="_blank">a link</a>
Example fiddle: http://jsfiddle.net/dCfD8/
I'd rather not create a new window in JavaScript (and take care of whatever else needs to be handled when a link is clicked).
You can trigger the click event using a simple trigger method in jQuery.
$('#alink').trigger('click');
Beware though, that even in the event gets fired, the browser will not follow the link href. The only way to follow the href is to actually click it with the mouse yourself.
As far as I know, there is no way to force a link to behave as if it were clicked. You have to change the document location or something like that to actually navigate between pages.
Expanding on Fabio Cicerchia's comment to his own post: You can use window.open:
var link = $('#alink');
var target = link.attr("target");
window.open(link.attr("href"), target ? target : "_self");
<script src='jquery lib source' ></script>
<script>
function force()
{ ...do something...to fill page2
$('#gopage2').trigger('submit');
}
</script>
<form action='#page2' id='gopage2'>
</form>
...
<span name='#page2'>This is page2</span>
try this:
$('#alink').trigger('click');
Think this is a quickie for someone. I have this markup (generated by ASP.Net)...
<A id=anchorO href="javascript:__doPostBack('anchorO','')">O</A>
This anchor is in an update panel, and if I click it manually a partial postback takes place. However....
$('[ID$="anchor'+initial+'"]').click() //JavaScript
..selects the correct anchor, but no postback takes place. Why is this?
A click and a href are seen as two different things in Javascript, so you can't do .click() and call the href, regardless if this is calling javascript: or not
Two options:
Just do:
$('#anchor' + initial).click(function() { __doPostBack('anchorO',''); });
Be evil and use eval:
$('#anchor' + initial).click(function() { eval($(this).attr('href')); });
See this question here
It appears that you can't follow the href of an a tag using the click event.