jfiddle: http://jsfiddle.net/ZmDs2/1/
Hi Im trying to accomplish collopsing other parent items while opening only one with jQuery toggle.
I tried
var index = $(this).index();
$('.togglebox').eq(index).slideToggle("fast").siblings('.togglebox').hide();
I would like you guys help..
Thanks
I changed the javascript to this:
$(document).ready(function(){
//Hide the tooglebox when page load
var current, toggleBoxes = $(".togglebox").hide();
//slide up and down when click over heading 2
$("h3").click(function(){
current = $(this).next(".togglebox");
toggleBoxes.not(current).slideUp('fast');
current.slideDown("fast");
});
});
I simply save all the elements with the "togglebox" class and collapse them before doing the slideToggle animation.
you weren't calling the hide function in the click event:
http://jsfiddle.net/ZmDs2/3/
Try this
$(function(){
$(".togglebox").hide();
$("h3").click(function(){
$(".togglebox").slideUp('fast');
$(this).next(".togglebox").slideDown("fast");
});
});
Related
$(document).ready(function(){
$('.pharmacies-module-title-class').click(function(){
console.log('heloooo');
});
});
That given class is a jquery ui accordion opening link and I'd like to add a class to it when the accordion is open, but this script doesn't work. Why is that?
Hey Please try that code
$(document).ready(function(){
$('body').on('click', '.pharmacies-module-title-class', function () {
console.log('heloooo');
});
});
I would like to hide one div and show other div.
While hiding and showing other div, it should look like a slide, which can be achieved using slideToggle() in jQuery.
Please suggest the necessary changes in my javascript to make div appear as a slide when clicked on 1 or 2 to show corresponding div in the table. Please find the complete example in this fiddle.
When user clicks on 1 divOne12 should be shown and when user clicks 2 divTwo12 should appear and previous div should be hidden. How can i apply slideToggle() in the below javascript function.
Thanks.
Below is the javascript:
$(function () {
$('.navigateTest').click(function () {
var t = $(this).data('target');
$('#'+t).show().siblings('div').hide();
});
});
Example: http://jsfiddle.net/0p7djjnc/9/
$(function () {
$('.navigateTest').click(function () {
var t = $(this).data('target');
$('#'+t).slideDown(500).siblings('div').slideUp(500);
});
});
Is this what you're referring to?
I have a link outside of a collapse element to an anchor inside of the collapsed content.
See my plnkr example.
If I collapse the panelat the bottom the anchor tag is not executed anymore. What I want to implement is the following:
If I click on an anchor which is currently not visible (because it is e.g. in an collapsed area), then I want to extend the containing area and then apply the link.
Any ideas how I could accomplish this?
Thanks a lot
$(function(){
$(document).on('click', 'a[href^="#"]', function(ev){
var targetId = $(ev.target).attr('href'),
$target = $(targetId);
$target.parents('.collapse').addClass('in').css({height: ''});
});
})
Like this? http://plnkr.co/edit/R2Fjsz9JnLkWEvFKUaAg?p=preview
// open collapsed items when clicking on the corresponding link
$(document).on('click', 'a[href^="#"]', function(ev){
var targetId = $(ev.target).attr('href'),
$target = $(targetId);
$target.parents('.collapse').addClass('show');
});
Same as accepted answer but for usage with Bootstrap Collapse elements
i am struggling writing the appropriate javascript to collapse and expand my content
View:
<div>
<h3 id="roleHeader" class="roleHeader collapsible">Title</h3>
<div>Content to display to users</div>
</div>
javascript:
$(document).ready(function() {
//collapsible management
$('.collapsible').collapsible({
});
});
You can implement one very easily
jQuery(function($){
$('.collapsible').click(function(){
$(this).next().stop(true, true).slideToggle();
}).next().hide()
})
Demo: Fiddle
You are probably looking for slideToggle. This function will toggle between sliding the content up and down.
try this
$(document).ready(function() {
$('.collapsible').click(function(){
$(this).slideToggle(500);
});
});
500 is the speed of the animation.
You can also target the object you'd like to hide and show. Either give it an Id, class, or target it specifically with jQuery. Here, when you click on anything that has a class of collapsible, the next div will hide and show.
$(document).ready(function() {
$(".collapsible").click(function(){
$(this).next("div").slideToggle(500);
});
});
If you need the animation to stop when you click on it again to prevent a jumping effect, add .stop(true) before the effect
$(document).ready(function() {
$(".collapsible").click(function(){
$(this).next("div").stop(true).slideToggle(500);
});
});
I have a div like this:
<div>
<font class='slideclick'>Click here to slidedown dynamic content</font>
<div class='slidedownonclick'> This is the content that slides down </div>
</div>
Jquery triggers the 'slidedownonclick' to slidedown when 'slideclick' is clicked. This works great but i have and indefinite amount on these div's reccuring in the same webpage, from a mysql database. Giving them unique id's is impossible. Is there any way that i could get only the 'slidedownonclick' in the same div as its respective 'slideclick' to slidedown when it is clicked.
Any help would be much appreciated,
thanks,
This will slide down the next .slidedownonclick div when .slideclick is clicked:
$('.slideclick').click(function() {
$(this).next('.slidedownonclick').slideDown();
});
On a .slideclick handler you will find that sibling with:
$(this).find('+ .slidedownonclick');
or:
$(this).next('.slidedownonclick');
$('.slideclick').click(function() {
$(this).next('.slidedownonclick').animate({
height: '+=50'
}, 1000);
});
Check about jQuery.next(), it's what do you want.
Using it you can get the next sibbling which class/id is the selector.
EDITED:
until jQuery 1.6.4
jQuery(document).delegate('font.slideclick', 'click', function() {
jQuery(this).next('slidedownonclick').slideToggle();
});
jQuery 1.7 +
jQuery(document).on('click', 'font.slideclick', function() {
jQuery(this).next('slidedownonclick').slideToggle();
});