This is my html:
<div class="button"></div>
<div class="wrapper>
<div class="something">Hello</div>
<div class="box one">Box 1</div>
<div class="box two">Box 2</div>
<div class="box three">Box 3</div>
</div>
By clicking the div "button", I want to add the class "active" to the first div with class name "box". If I clicking the button again, I want to remove the class "active" from box 1 and add it to box 2. Aso.
Later, if box 3 has the added class name "active" and I press the div "button" again, it should start from the beginning.
I try something like this, but it fails:
$(".button").click(function() {
$(this).find(".wrapper").add(".box").toggleClass("active");
});
You'll need to use css :eq() selector or .eq() on jquery
$(document).ready(function(){
var index = 0; // define index for the first box
$('.button').on('click',function(){
$('.wrapper .box').removeClass('active'); // remove class active from all box divs
$('.wrapper .box:eq('+index+')').addClass('active'); // add class active to the box index we need
index = (index < $('.wrapper .box').length - 1) ? index +1 : 0; // if index = the number of box divs add + 1 if not return it back to 0
}).click(); // if you need to run it onload add .click()
});
.active{
background : red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Click</div>
<div class="wrapper">
<div class="something">Hello</div>
<div class="box one">Box 1</div>
<div class="box two">Box 2</div>
<div class="box three">Box 3</div>
</div>
You can try something like this:
jQuery(".button").click(function(){
var active = jQuery(".wrapper").children(".active").first();
if (!active.length)
jQuery(".wrapper").children(":first").addClass("active");
else{
active.removeClass("active");
if (active[0] != jQuery(".wrapper").children(":last")[0])
active.next().addClass("active");
else
jQuery(".wrapper").children(":first").addClass("active");
}
});
.button {
width: 150px;
height: 50px;
cursor: pointer;
background-color: blue;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-style: solid;
border-width: 0.5px;
border-radius: 9px;
position: relative;
left: 30%;
}
.wrapper {
margin-top: 20px;
margin-left: 30px;
background-color: white;
width: 450px;
height: 550;
text-align: center;
border-style: dashed;
}
.active {
background-color: grey;
}
.something {
margin-bottom: 8px;
margin-top: 8px;
}
.box {
margin-bottom: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">
<p>Press Me</p>
</div>
<div class="wrapper">
<div class="something">Hello</div>
<div class="box one">Box 1</div>
<div class="box two">Box 2</div>
<div class="box three">Box 3</div>
</div>
Some fun with generator functions :)
let box = 0;
$('.button').on('click', function() {
const boxes = document.querySelectorAll('.box'); // get all boxes
let iter = activateBox(box, boxes); // create itarator to go over boxes
$('.box').removeClass('active'); // remove any active class from all boxes
iter.next(box++).value.classList.add('active'); // add active class to the next box in line
if (box === boxes.length) box = 0; // reset counter if last box reached
});
function* activateBox(i, boxes) {
yield boxes[i];
}
body {
font-family: 'Arial', sans-serif;
}
.button {
display: inline-block;
padding: 8px;
border: 2px solid lightblue;
border-radius: 4px;
color: #444;
cursor: pointer;
transition: background .15s ease-out;
}
.button:hover {
background: lightblue;
color: #FFF;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 100px;
background: #FFF;
margin: 8px 0;
border: 2px solid lightblue;
border-radius: 4px;
}
.box.active {
background: lightblue;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">Apply Active</div>
<div class="wrapper">
<div class="box one">Box 1</div>
<div class="box two">Box 2</div>
<div class="box three">Box 3</div>
</div>
Related
Here is what I have created so far:
screenshot here
Basically you start off with the red div on the left with the red circle that is active on the right. When you click on the blue circle, for example, you get the div on the left to turn blue and then the blue circle gets active and the red circle gets inactive. Here is how it looks after clicking on the blue circle: screenshot here
And of course, if you click on the green circle the div on the left turns green if you click on the black circle the div on the left turns black.
Here is the code:
$(document).ready(function(){
$('#circle-2').click(function(){
$(this).addClass('active-circle')
$('#circle-1').removeClass('active-circle')
$('#circle-3').removeClass('active-circle')
$('#circle-4').removeClass('active-circle')
$('.rect').removeClass('rect-1').removeClass('rect-3').removeClass('rect-4').addClass('rect-2')
})
$('#circle-1').click(function(){
$(this).addClass('active-circle')
$('#circle-2').removeClass('active-circle')
$('#circle-3').removeClass('active-circle')
$('#circle-4').removeClass('active-circle')
$('.rect').removeClass('rect-2').removeClass('rect-3').removeClass('rect-4').addClass('rect-1')
})
$('#circle-3').click(function(){
$(this).addClass('active-circle')
$('#circle-1').removeClass('active-circle')
$('#circle-2').removeClass('active-circle')
$('#circle-4').removeClass('active-circle')
$('.rect').removeClass('rect-1').removeClass('rect-2').removeClass('rect-4').addClass('rect-3')
})
$('#circle-4').click(function(){
$(this).addClass('active-circle')
$('#circle-1').removeClass('active-circle')
$('#circle-2').removeClass('active-circle')
$('#circle-3').removeClass('active-circle')
$('.rect').removeClass('rect-1').removeClass('rect-2').removeClass('rect-3').addClass('rect-4')
})
})
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.rect {
height: 50vh;
width: 100%;
}
.rect-1 {
background: red;
}
.rect-2 {
background: blue;
}
.rect-3 {
background: green;
}
.rect-4 {
background: black;
}
.circle {
height: 100px;
width: 100px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
opacity: .25;
}
.circle-color-1 {
background-color: red;
}
.circle-color-2 {
background-color: blue;
}
.circle-color-3 {
background-color: green;
}
.circle-color-4 {
background-color: black;
}
.active-circle {
opacity: 1;
}
<div class="grid">
<div class="rect rect-1">
</div>
<div class="circles-container">
<div id="circle-1" class="circle circle-color-1 active-circle">Circle 1</div>
<div id="circle-2" class="circle circle-color-2">Circle 2</div>
<div id="circle-3" class="circle circle-color-3">Circle 3</div>
<div id="circle-4" class="circle circle-color-4">Circle 4</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script src="./index.js"></script>
Now here is where I am struggling. I want the div on the left to switch color automatically every 3 seconds and of course, the circles on the right should match that as well. So we start with the div on the left being red and the red circle on the right being active and after 3 seconds the div changes to blue and the active circle is the blue one. Basically what I have now but happening automatically without having to click on the circles and keeping the click functionality as well.
Your first priority, aside from achieving the automatic cycle through the elements, is to DRY up your code. Given that all that changes between the multiple repeated event handlers is the class you add, you can remove the id attributes and target the elements by their common .circle class. You can then bind a single event handler which works for all elements and applies the class to .rect which is stored in a data attribute on each element.
To create the cycle effect you can use setInterval(), targeting the next element from the one which currently has .active-circle. Try this:
jQuery($ => {
var $rect = $('.rect');
var $circles = $('.circle').on('click', setActiveCircle);
$circles.first().trigger('click');
function setActiveCircle() {
$circles.removeClass('active-circle');
$(this).addClass('active-circle');
$rect.removeClass('rect-1 rect-2 rect-3 rect-4').addClass($(this).data('rect'));
}
setInterval(function() {
let $targetCircle = $circles.filter('.active-circle').next();
if ($targetCircle.length === 0)
$targetCircle = $circles.first();
setActiveCircle.call($targetCircle);
}, 3000);
});
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.rect {
height: 50vh;
width: 100%;
}
.rect-1 { background: red; }
.rect-2 { background: blue; }
.rect-3 { background: green; }
.rect-4 { background: black; }
.circle {
height: 100px;
width: 100px;
border-radius: 50%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
opacity: .25;
}
.circle-color-1 { background-color: red; }
.circle-color-2 { background-color: blue; }
.circle-color-3 { background-color: green; }
.circle-color-4 { background-color: black; }
.active-circle { opacity: 1; }
<div class="grid">
<div class="rect"></div>
<div class="circles-container">
<div class="circle circle-color-1" data-rect="rect-1">Circle 1</div>
<div class="circle circle-color-2" data-rect="rect-2">Circle 2</div>
<div class="circle circle-color-3" data-rect="rect-3">Circle 3</div>
<div class="circle circle-color-4" data-rect="rect-4">Circle 4</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
I have the following tabs and I would like to make them responsive when in smaller screens. Currently the last tabs just disappear when I make the screen smaller. The best scenario would be... when in smaller screens the tabs will start stacking below the first ones. Any ideas on how to implement this?
(function() {
$(function() {
var toggle;
return toggle = new Toggle('.toggle');
});
this.Toggle = (function() {
Toggle.prototype.el = null;
Toggle.prototype.tabs = null;
Toggle.prototype.panels = null;
function Toggle(toggleClass) {
this.el = $(toggleClass);
this.tabs = this.el.find(".tab");
this.panels = this.el.find(".panel");
this.bind();
}
Toggle.prototype.show = function(index) {
var activePanel, activeTab;
this.tabs.removeClass('active');
activeTab = this.tabs.get(index);
$(activeTab).addClass('active');
this.panels.hide();
activePanel = this.panels.get(index);
return $(activePanel).show();
};
Toggle.prototype.bind = function() {
var _this = this;
return this.tabs.unbind('click').bind('click', function(e) {
return _this.show($(e.currentTarget).index());
});
};
return Toggle;
})();
}).call(this);
.toggle {
font-family: arial, sans-serif;
}
.toggle .tabs {
border-bottom: 1px solid grey;
width: 100%;
overflow: hidden;
height: 36px;
line-height: 36px;
}
.toggle .tabs .tab {
float: left;
background: white;
color: #777777;
height: 31px;
margin: 2px 8px 0;
padding: 0 8px;
cursor: pointer;
}
.toggle .tabs .tab.active {
color: #dd4b39;
border-bottom: 3px solid #dd4b39;
}
.toggle .panels .panel {
padding: 20px 10px;
display: none;
}
.toggle .panels .panel:first-child {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='toggle'>
<div class='tabs'>
<div class='tab active'>Tab 1</div>
<div class='tab'>Tab 2</div>
<div class='tab'>Tab 3</div>
<div class='tab'>Tab 4</div>
</div>
<div class='panels'>
<div class='panel'>Panel 1</div>
<div class='panel'>Panel 2</div>
<div class='panel'>Panel 3</div>
<div class='panel'>Panel 4</div>
</div>
</div>
There are various ways to handle web-page responsiveness:
1.) Use flex view to make it scale based on the size of your page. But this doesn't sustain much because beyond a point the text starts to overflow the container.
2.) Use media queries to change the page layout at different sizes of the page. Reference
It turns out that it was very simple... I just had to delete the height from the following:
.toggle .tabs {
border-bottom: 1px solid grey;
width: 100%;
overflow: hidden;
height: 36px; ////////delete this here
line-height: 36px;
}
I had no idea how to title this topic, sorry for that. I am building simple shopping cart splited into few steps. The whole thing is supposed to work similar to sliders or well-known tabs.
Let's see the code to make things easier.
$(document).ready(function(){
$('.stepNumber').click(function(e) {
e.preventDefault();
var stepDesc = $(this).next('.stepDesc');
if(!stepDesc.is(':visible')) {
$('.step').removeClass('stepActive');
$(this).parent().addClass('stepActive');
}
var val = parseInt($('.step.stepActive').children('div.stepNumber').text());
switch(val) {
case 1:
$('.formStepTwo').hide();
$('.formStepOne').show();
break;
case 2:
$('.formStepOne').hide();
$('.formStepTwo').show();
break;
case 3:
alert('blabla');
break;
}
});
});
.formStep {
display: none;
}
step {
float: left;
border: 1px solid #333;
margin-right: 5px;
}
.stepNumber {
background: #333;
color: #fff;
float: left;
padding: 6px 10px;
}
.stepDesc {
text-align: left;
padding: 6px 10px;
width: 150px;
display: none;
}
.stepActive > .stepDesc {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="step stepOne stepActive">
<div class="stepNumber">1</div>
<div class="stepDesc">Cart</div>
</div>
<div class="step stepTwo">
<div class="stepNumber">2</div>
<div class="stepDesc">Client data</div>
</div>
<div class="step stepThree">
<div class="stepNumber">3</div>
<div class="stepDesc">Shipping data</div>
</div>
<div class="formStep formStepOne">
Something - tab content
</div>
<div class="formStep formStepTwo">
Something else
</div>
Sorry for the appearance, some cosmetic css is missing here.
The actual problem:
I want to add button "Next" just under my "tab content". If we're in the step 1 at this moment, clicking that button should take us to step 2 and so on.
In the meantime time our "tab menu" script should be activated - as in the snippet: close description of others step, show current description and add class "stepActive".
Almost the same thing you can find in common sliders: arrows (next, prev) to move between slides and also "dot menu" with correct dot being highlighted.
If I'm not mistaken, it's something like that, what you wanted, isn't it?
$(document).ready(function(){
$('.stepNumber:contains(3)').click(function(){
alert('blabla');
});
$('.nextStep').click(function (e) {
e.preventDefault();
var stepActive = $('.stepActive');
if (stepActive.next('.step').length)
stepActive.next().children('.stepNumber')[0].click();
else
$('.step > .stepNumber')[0].click();
});
$('.stepNumber').click(function(e) {
e.preventDefault();
var obj = $(this);
var parent = obj.parent();
var stepDesc = obj.next('.stepDesc');
if(!stepDesc.is(':visible')) {
$('.step').removeClass('stepActive');
parent.addClass('stepActive');
}
$('[id^=step]').hide();
$('#step' + obj.text()).show();
});
$('.stepNumber')[0].click();
});
.formStep {
display: none;
}
.step {
float: left;
border: 1px solid #333;
margin-right: 5px;
}
.stepNumber, .nextStep {
background: #333;
color: #fff;
float: left;
padding: 6px 10px;
}
.stepDesc {
text-align: left;
padding: 6px 10px;
width: 150px;
display: none;
}
.stepActive > .stepDesc {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="step">
<div class="stepNumber">1</div>
<div class="stepDesc">Cart</div>
</div>
<div class="step">
<div class="stepNumber">2</div>
<div class="stepDesc">Client data</div>
</div>
<div class="step">
<div class="stepNumber">3</div>
<div class="stepDesc">Shipping data</div>
</div>
<div id="step1" class="formStep">
Something - tab content
</div>
<div id="step2" class="formStep">
Something else
</div>
<div id="step3" class="formStep">
The last one
</div>
<div class="nextStep">Next</div>
I have a page where multiple div and within each div there is a option to click and toggle the information, I am able to create by defining different IDs of DIV but I think that can be done somehow dynamically, here is what I have created in JSFiddle
CSS
.boxwrap {
float: left;
width: 200px;
height: 250px;
border: 1px solid #ccc;
margin: 0 5px 0 0;
text-align: center;
box-sizing: border-box;
padding: 10px;
}
.boxwrap_inner {
float: left;
width: 100%;
background: #ddd;
padding: 5px 0;
text-align: center;
}
.noDisplay {
display: none;
}
HTML
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>
JQuery
$('#button1').click(function () {
$("#content1").slideToggle(200);
});
$('#button2').click(function () {
$("#content2").slideToggle(200);
});
Check this:
$('.boxwrap > a').click(function () {
$(this).next().slideToggle(200);
});
.boxwrap {
float: left;
width: 200px;
height: 250px;
border: 1px solid #ccc;
margin: 0 5px 0 0;
text-align: center;
box-sizing: border-box;
padding: 10px;
}
.boxwrap_inner {
float: left;
width: 100%;
background: #ddd;
padding: 5px 0;
text-align: center;
}
.noDisplay {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>
The previous answers rely on the fact that the DOM is going to remain the same and the next() element after the button will always be the content div.
For a more robust solution, I would add a class to the buttons in the boxwrap(i.e. .boxbtn) and a class to the content divs (i.e. boxcontent) and then I would do something like the following:
$('.boxbtn').click(function () {
$(this).closest('.boxwrap')..find('.boxcontent').slideToggle(200);
});
Try this way,
It's better to specify the element with it's parent on which you're calling a click event.
$('.boxwrap > a').click(function(){
$(this).next('div').slideToggle(200);
});
Here with 2 options
using relative attribute value
using finding relative don element
/*$('.toggle_link').click(function () {
$($(this).data('toggle')).slideToggle(200);
});
OR
*/
$('.toggle_link').click(function () {
$(this).parent().find('.noDisplay').slideToggle(200);
});
.boxwrap{float:left; width:200px; height:250px; border:1px solid #ccc; margin:0 5px 0 0; text-align:center; box-sizing:border-box; padding:10px;}
.boxwrap_inner{float:left; width:100%; background:#ddd; padding:5px 0; text-align:center;}
.noDisplay{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content1">
Content goes here
</div>
</div>
<div class="boxwrap">
Go
<div class="boxwrap_inner noDisplay" id="content2">
Content goes here
</div>
</div>
I have the following code where I added a plus symbol to one of my service titles. I was informed by someone that when that service is clicked on I should have a minus sign take its place to show that it can be minimized. I am unsure of how to swap out the plus sign when the description has been expanded. Does anyone have any ideas of how I could do that?
Here is a snippet. Click on one of the service names to see the description expand.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">
<img src="http://realtorcatch.com/icons/plusSymbol.png" alt="Service" style="width:10px;height:10px;">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
Here is the working example, i change a little de html and Js
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
var t = $(this);
if(t.hasClass('open'))
{
t.removeClass('open');
t.find('.status').html("+");
}else {
t.addClass('open');
t.find('.status').html("-");
}
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
the working example
I'd suggest simply toggling a class to achieve this.
You can add the icon as a background image of a pseudo element inserted into the .service_title element. Then you can simply toggle a class in order to change the icon. Update the background image URLs accordingly. See the updated example for the modified jQuery; it's still only 5 lines.
The relevant CSS:
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
Updated Example:
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
$('.service_description').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>
You could just change it within your click binding...
Let's say your using images, just add a data-attribute you can query when you need to, like this...
HTML
<div class="service_wrapper">
<img data-state="plus" class="state" src="plus.png" alt="More"/>
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
JS
$('.service_wrapper').click(function() {
var state = $(this).find('.state');
if(state.data('state') == 'plus')
state.attr({ 'src': 'minus.png', 'alt': 'Less' }).data('state', 'minus');
else
state.attr({ 'src': 'plus.png', 'alt': 'More' }).data('state', 'plus');
});