Im kinda still new to JQ/JS functions, and trying something by myself...so my issue here is that, for example: click on tab named "Tab1" and then an image gets opened. After that if i click again on that very same tab, image slides back, which is fine. But i want that since tab "Tab1" is already opened with image loaded under it, i switch immediately on "Tab2" and when i do that i get image loaded under "Tab2" content without sliding back up or anything, just to look like i first time clicked on that Tab, with all "animations" of smooth slow scroll to the bottom.
JSFIDDLE example of jq function inside jsfiddle.(1 out of 3)
$(document).ready(function(){
$('#inside1').click(function() {
$("#panel").css('background-image', 'url(http://upload.wikimedia.org/wikipedia/commons/1/1f/Nsr-slika-015.png)');
});
});
ps: from some reason jsfiddle wont load it as i want, but you still can see the issue there.
Try
jQuery(function ($) {
var $panel = $("#panel");
var $tabs = $('.tab').click(function () {
var $this = $(this),
isActive = $this.hasClass('active');
if ($panel.is(':visible') && !isActive) {
$panel.css('background-image', 'url(' + $this.data('background') + ')');
$tabs.removeClass('active');
$this.addClass('active');
} else {
if (!isActive) {
$panel.css('background-image', 'url(' + $this.data('background') + ')');
}
$panel.slideToggle();
$this.toggleClass('active');
}
});
})
Demo: Fiddle
I would do it this way:
$(".tab").click(function () {
var id = $(this).attr("id");
id = id.substr(id.length - 1, 1);
if ($(this).hasClass("open")) {
$("#panel").slideUp();
} else {
$(".tab.open").removeClass("open");
if ($("#panel").is(":hidden")) {
$("#panel").slideDown();
}
$("#panel").removeAttr("class");
$("#panel").addClass("panel" + id);
}
$(this).toggleClass("open");
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.