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/
Related
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 wonder if this possible, let's say I have controller which returns me some parameters, let's called module, so I basically generate html content based on this, and this refresh each certain amount of time via ajax.
So, one of the properties is an alert, if alert is true, I add a class to the element, let's called it warning, so at the end, it generates something like this:
<div class="mod1"></div>
<div class="mod2"></div>
<div class="mod3"></div>
<div class="mod4"></div>
<div class="mod5 warning"></div>
If there any chance to place the divs with the warning class on top only using javascript???
Any adviced would be appreciated.
Regards.
If you are using jquery, this is a one approach:
CodePen
HTML:
<div id="messages">
<div class='message'> message 1</div>
<div class='message'> message 2</div>
<div class='message'> message 3</div>
<div class='message warning'> message 4</div>
<div class='message warning'> message 5</div>
</div>
JavaScript:
$(function(){
var clones = $('div.warning');
$('div.warning').remove();
$('#messages').prepend(clones);
})
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/