I really stuck on this, what I need is to switch the image together with the tabs text, but the image should be outside of the tabs container. I made some jQuery code, but it's not flexible in case if I want to add more tabs and the functions are duplicating, which is also looks not so well.
Is there some option, maybe a function that will check if the number of cliked tab will match with image id and switch the image according this number.
Please help :)
The code example - http://codepen.io/DeoThemes/pen/EyAjVA
jQuery:
$('#tabs-img-1').show();
$("a[href='#tab-1']").on('click', function() {
$('.tabs-img').hide();
$('#tabs-img-1').show();
});
$("a[href='#tab-2']").on('click', function() {
$('.tabs-img').hide();
$('#tabs-img-2').show();
});
$("a[href='#tab-3']").on('click', function() {
$('.tabs-img').hide();
$('#tabs-img-3').show();
});
$("a[href='#tab-4']").on('click', function() {
$('.tabs-img').hide();
$('#tabs-img-4').show();
});
$("a[href='#tab-5']").on('click', function() {
$('.tabs-img').hide();
$('#tabs-img-5').show();
});
This will do without changing any of your code. Let me know your feedback. Thanks!
$('.tabs a[data-toggle="tab"]').on('click', function() {
$('.tabs-img').hide();
$('#tabs-img-' + $(this).attr('href').split('-')[1]).show();
});
or better still you can place an attribute on the a tag which will be the id of the tab!
I have edited your Codepen.
Add custom attribute to anchor link:
Business Oriented
And then change your script to this:
$("ul.nav-tabs li a").on('click', function() {
$('.tabs-img').hide();
$($(this).attr('imgId')).show();
});
Related
Can anyone help me simplify this code snippet? I would like to be able to write less lines of code instead of repeating the same code with different selectors ( sounds like a loop, but I don't know how to do it).
The problem when I put multiple classes separated by commas, they do not show the hidden content individually.
$(document).ready(function(){
//hide show toggle Latest
$(".more-text-latest, .more-text-latest-2").hide();
$(".read-more-latest").click(function(event){
event.preventDefault();
$(".more-text-latest").slideToggle(600);
$(this).toggleClass(".more-text-latest");
});
$(".read-more-latest-2").click(function(){
$(".more-text-latest-2").slideToggle(600);
$(this).toggleClass(".more-text-latest-2");
});
If you just want a loop that does the same thing there are several ways to achieve it, for example:
$(document).ready(function () {
//hide show toggle Latest
[
'.read-more-latest',
'.read-more-latest-2'
].forEach(function (selector) {
var moreTextSelector = selector.replace('read-more', 'more-text');
$(moreTextSelector).hide();
$(selector).click(function (e) {
e.preventDefault();
$(moreTextSelector).slideToggle(600);
$(this).toggleClass(moreTextSelector);
if ($(this).hasClass(moreTextSelector)) {
$(this).html('Return');
}
else {
$(this).html('Read More');
}
});
});
});
$(document).ready(function() {
$('#b1').click(function() {
$('#uch').toggle("slow");
});
$('#b2').click(function() {
$('#uch2').toggle("slow");
})
})
I'm not a programmer but somehow managed to make div buttons that opens another div when clicked but I cant manage how to make so that when I click on one button that opens div and then when I click on other button it opens div and hides previous div. I want to integrate it later to joomla template, but as I use jquery and all efforts with if not working maybe someone is clever then me. thanks in advance. I place here working fiddle too.
fiddle example of my buttons
affter some usefull answers i reedited my code and managed to simplify it and added third button , now with extra css class everything seems pretty good but when i click already opened div it reappears as if looping.
edited fiddle
$(document).ready(function() {
$('#b1').click(function() {
$('.bats').hide("slow");
$('#uch').toggle("slow");
});
$('#b2').click(function() {
$('.bats').hide("slow");
$('#uch2').toggle("slow");
});
$('#b3').click(function() {
$('.bats').hide("slow");
$('#uch3').toggle("slow");
});
})
You can call hide('slow') on the other uch element on click of the button. Try this:
$('#b1').click(function() {
$('#uch').toggle("slow");
$('#uch2').hide("slow");
});
$('#b2').click(function() {
$('#uch').hide("slow");
$('#uch2').toggle("slow");
});
Working example
Change ID To Class
$(document).ready(function() {
$('.b1').click(function() {
$('.uch').hide();
$(this).find('.uch').toggle("slow");
});
});
https://jsfiddle.net/u28f6yeL/5/
Here is a working solution for your problem:
change your JQuery code like this:
$(document).ready(function() {
$('#b1').click(function() {
if($('#uch2').css('display') != 'none'){
$('#uch2').toggle("slow");
};
$('#uch').toggle("slow");
});
$('#b2').click(function() {
if($('#uch').css('display') != 'none'){
$('#uch').toggle("slow");
};
$('#uch2').toggle("slow");
});
});
Here's a JSFiddle
you can write a function which close the one is opend! than call them in your click-funktions before toggle the other.
I would like to add an element to another list and remove it from the current when clicked. I tried it with the property appendTo of Selectable, but nothing happens when I click on it.
I built this https://jsfiddle.net/wgaga8uc/ to ilustrate it.
$("#paramselectable").selectable({appendTo: "#paramselected"});
$("#paramselected").selectable({appendTo: "#paramselectable"});
I would appreciate any help,
Thanks.
$("#paramselected li").click(function(){
$("#paramselectable").append(document.createTextNode( "Hello" ));
});
Finally I achieved it adding and removing classes. https://jsfiddle.net/22d7sxvd/
$(function() {
$( ".paramsnav" ).selectable();
});
$('li').click(function () {
var selected = $('#params').find('.ui-selected');
if(selected.hasClass('selectable')) {
selected.removeClass('ui-selected');
selected.removeClass('selectable');
selected.addClass('selected');
selected.appendTo('#paramselected');
} else {
selected.removeClass('ui-selected');
selected.removeClass('selected');
selected.addClass('selectable');
selected.appendTo('#paramselectable');
}
});
<script>
$(document).ready(function() {
$("#services").click( function() {
$(".subMenus").fadeToggle("slow")
});
});
</script>
This is my code. I can hide and show the dropdown(subMenus) with this code. I want to show the dropdown in my first click which it works but I want to go to a link when I clicked to services for the second time. How can I do?
There is a perfect way for you
$("#services").one('click', function() {
$(".subMenus").fadeToggle("slow")
});
You can do this be checking the visibility of your element. When it's not visible show it, when it is move to your link:
$("#services").click( function() {
if($(".subMenus").is(":visible"))
window.location = "yourLinkHere";
else
$(".subMenus").fadeToggle("slow");
});
I'm trying to have a CSS link disabled for 1 second after it has been clicked.
I have tried this without success;
In the header:
<script type="text/javascript">
$(function() {
$("#link").click(function() {
$("#link").attr("disabled", "disabled");
setTimeout(function() {
$("#link").removeAttr("disabled");
}, 2000);
});
});
</script>
Html:
the link text
CSS:
.link:diabled {
some values here.. }
You have a class="link", but with $("#link") you are addressing the id called link.
So write $(".link") everywhere instead of $("#link").
By the way: with .link:disabled you won't address the link as this only works on inputs and buttons. If you need to address it, use .link[disabled="disabled"] { ... } or even better add a class to it called disabled_link and then do in CSS .disabled_link { ... }.
There are quite a few problems here:
You are using # (the ID selector), but your html is using classes.
<a> does not have a disabled attribute
If it did, you would probably want to use .prop instead of .attr
If you change code to use classes, $(".link").prop("disabled", true) would affect all anchors, so you should probably use this.
Because disabled does not exist for <a>, the :disabled selector does not seem to work for CSS.
A working solution would be something like this:
$(".link").click(function() {
var $this = $(this);
$this.addClass('disabled');
setTimeout(function() {
$this.removeClass('disabled');
}, 2000);
});
$(document).on('click', '.disabled', function (e) {
e.preventDefault();
});
http://jsfiddle.net/ExplosionPIlls/PaYcc/
'link' is a class and you are using it as ID. Do $('.link') instead of $('#link').
I think this approach works better. The other allows you to click the link multiple times and mess up the setTimeout this unbinds the event and then re-attaches the event after the setTimeout ex: double click the link
$(".link").click(linkBind);
function linkBind(){
var $this = $(this);
$this.addClass('disabled');
$this.unbind('click');
setTimeout(function() {
$this.removeClass('disabled');
$this.bind('click', linkBind);
}, 2000);
}
$(document).on('click', '.disabled', function (e) {
e.preventDefault();
});
http://jsfiddle.net/PaYcc/1/