I create collapsible tab and I want some changes is there if once click on 1st tab this will be goes last in the collapsible list and same for the other tab also. (If having 4 tab and click on 1st tab in the list 1st is goes last 2 3 4 1)
Thanks in advances...
I think you are looking for this.
HTML code
<div class="wrapper">
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
</div>
jQuery Code
$('.wrapper').find('div').on('click', function(){
$(this).appendTo( $(this).parent() )
})
Working Code: http://jsfiddle.net/P7tap/
Related
I am having trouble trying to figure out how to show a specific item when clicking on a specific button and then hiding the other siblings.
So, what I have is 6 buttons.
Service 1-6
If someone would click on service 1, I would want my service-display-box section to appear (I have it set as display:none on page load) and then for just the Service 1 content to appear.
The way I have it now, it hides the sibling buttons I have and doesn't show the service-display-box or any of the service areas.
I have included a fiddle below.
Service buttons - When you click on Service 1
<div id="service-tabs-container">
<div class="service-tab-block" id="service_tab1">Service 1</div>
<div class="service-tab-block" id="service_tab2">Service 2</div>
<div class="service-tab-block" id="service_tab3">Service 3</div>
<div class="service-tab-block" id="service_tab4">Service 4</div>
<div class="service-tab-block" id="service_tab5">Service 5</div>
<div class="service-tab-block" id="service_tab6">Service 6</div>
</div>
</div>
I want to show this:
<div class="service-item-box" id="service1">
<div class="service-item-title">Service 1</div>
</div>
Fiddle
You will need to get the number from the id on the service tab you want, then append that to the id of the service item box:
$('.service-tab-block').click(function() {
$('.service-tab-block').css({"background":"purple"});
$(this).css({"background":"#000", "color":"#FFF"});
//To get the service display box to show
var item_number = $(this).attr('id').replace('service_tab', '');
$('#service-display-box').show();
$('#service'+item_number).show().siblings().hide();
})
https://jsfiddle.net/esayoaqg/1/
I am trying to populate an array in JavaScript using jQuery. I have some <div> elements in a <section> and I only want the <div> elements that are visible (via CSS property display: block) to be added to the array.
HTML:
<section id="container">
<div>shows up 1</div>
<div style="display:none">doesn't show 2</div>
<div>shows up 3</div>
<div style="display:none">doesn't show 4</div>
<div style="display:none">doesn't show 5</div>
<div>shows up 6</div>
<div>shows up 7</div>
<div>shows up 8</div>
<div style="display:none">doesn't show 9</div>
<div>shows up 10</div>
</section>
JavaScript / jQuery
var mainList = $("#container div");
This currently gets ALL <div> elements regardless of their display. Is there some kind of filter I can put onto this call to get only the elements that are visible? It should only return the 6 <div> elements that say "shows up" in them.
Fiddle: http://jsfiddle.net/259chbj4/
Note: For this, I can't use a class that has display: none. I am looking for a solution that only modifies the JavaScript.
You can simply use the :visible selector.
$("#container div:visible");
try:
var mainList = $('#container').find("div :visible");
can some one tell me how to Toggle button background color on click?
look at this buttons and add examples please : http://jsfiddle.net/ukkj7dth/
<div class="button">button 1</div>
<div class="button">button 2</div>
<div class="button">button 3</div>
<div class="button">button 4</div>
<div class="button">button 5</div>
<div class="button">button 6</div>
i want it to be like, when a button 1 clicked it must change background color to yellow and when button 2 clicked then button 1 must go back to green background and button 2 change to yellow etc...
Thanks
Just toggle a class
$('.button').on('click', function() {
$(this).toggleClass('myClass').siblings().removeClass('myClass');
});
FIDDLE
can some one help me with this please http://jsfiddle.net/ukkj7dth/5/
it works perfectly on toggling buttons but i don't why it's working on jsfiddle and not working in my page. do i need some js file?
<div class="button">button 1</div>
<div class="button">button 2</div>
<div class="button">button 3</div>
<div class="button">button 4</div>
<div class="button">button 5</div>
<div class="button">button 6</div>
You want to fire the code on DOM ready like so:
$(function() { //<<<<----
$('.button').on('click', function() {
$(this).toggleClass('myClass').siblings().removeClass('myClass');
});
}); //<<<<----
It works in jsfiddle because you're firing the code on window load ... see onLoad in dropdown. If you set jsfiddle to no wrap in <head> it'll stop working -- which would be close to what you might have in your application.
Does Not Work
Works
I know there are a lot of these threads but none seem to really fit me.
I have 5 dives with text like "this is div1, to div5". These are always gonna be shown.
And i have 5 hidden divs with text belonging to each div, that are gonna show if i click on my shown divs.
If I click div1, i want to show the hidden div1.
Right now I'm using a click function(jQuery) for every div which works but doesn't look very good in code. There has to be a better way. Any advise?
I do NOT want any of the divs to be hyperlinks, which seem to be the solution on a lot of similar threads on here.
EDIT: This is my current code.(can't get jsfiddle to work)
html
<div class="showing_div">
<p>This is a showing div</p>
</div>
<div class="hidden_div" style="display: none;>
<p>This div is hidden</p>
</div>
Jquery
$('showing_div').click(function() {
$('hidden_div').toggle();
})
This are the most used techniques:
target element using .index() and .eq()
<div id="clickables">
<div>CLICK 1</div>
<div>CLICK 2</div>
</div>
<div id="togglables">
<div>text 1</div>
<div>text 2</div>
</div>
$(function(){
$("#clickables div").click(function(){
var idx = $(this).index();
$('#togglables div').eq( idx ).slideToggle();
});
});
Pros: you can keep a really clean HTML markup, no need to assign additional classes or ID
Cons: don't put other elements inside the parents otherwise you might mess the index count
target element using .next() or other jQuery traversal methods
<div id="menu">
<div class="clickable">CLICK 1</div>
<div>text 1</div>
<div class="clickable">CLICK 2</div>
<div>text 2</div>
</div>
$(function(){
$("#menu .clickable").click(function(){
$(this).next('div').slideToggle();
});
});
target specific element using ID
<div class="clickable" id="_1" > CLICK 1 </div>
<div class="clickable" id="_2" > CLICK 2 </div>
<div id="togglable_1"> text 1 </div>
<div id="togglable_2"> text 2 </div>
$(function(){
$(".clickable").click(function(){
$("#togglable"+ this.id).slideToggle();
});
});
Pros: You can target elements unlogically positioned in the DOM
Cons: Verbose HTML; Unflexible and hardly maintainable code.
$('div').click(function() {
var text = $(this).text();
$('#'+text).show();
});
FIDDLE DEMO
As #Roko C. Buljan nicely showed there are many ways of doing it.
This is how I usually do using .data() jQuery function:
<div class="clickable" data-hidden="d1">CLICK 1</div>
<div id="d1" class="hidden">text 1</div>
<div class="clickable" data-hidden="d2">CLICK 2</div>
<div id="d2" class="hidden">text 2</div>
$(".clickable").click(function() {
$("#" + $(this).data("hidden")).toggle();
});
This way it does not matter how I organize my DOM elements. I only need to care to identify the right id in every data-hidden attribute.
Working demo