AliShahVis
Reputation: 141
JQuery - hide a button if no other button has the class that warrants it's appearance
I am having an issue with handling the control flow of the following process.
When you select P2, you are presented with a wheel of buttons. As soon as you click one button, the let's go button appears. When you deselect that button, it is still there.
I would like a solution that builds ontop of my code, where if there are no buttons that have the class 'actived', the let's go button doesn't appear.
Right now, if you select one it adds the class to make it appear, but deselecting it doesnt.
I have tried multi-selectors for logo1, logo2... and so on, to NOT have the class 'actived' and if there is no class of a logo with 'actived' the let's go button should not appear, but that hasn't worked.
Can you help me find a way to prevent the let's go button appearing if there is no logo button with the class of 'actived?' At least 1 button should be selected.
Thanks so much stack.
$('.circle .semi-circle-1').on('click', function(){
$('.circle .semi-circle-2').removeClass('active');
$(this).addClass('active');
$('#logo').addClass('pets');
$('.pet').addClass('visualised');
$('.instructions-arrow-1').addClass('hide');
$('.instructions-arrow-2').removeClass('hide');
$('.petOwner').removeClass('visualised');
$('.PTitle').addClass('actived');
$('.POTitle').removeClass('actived');
$('.div3').addClass('actived');
$('.div2').removeClass('actived');
$('.logo1').removeClass('active');
$('#b1').removeClass('alive');
$('#b1').removeClass('zoomTarget');
$('#b1').addClass('dead')
$('.logo2').removeClass('active');
$('#b2').removeClass('alive');
$('#b2').removeClass('zoomTarget');
$('#b2').addClass('dead')
$('.logo3').removeClass('active');
$('#b3').removeClass('alive');
$('#b3').removeClass('zoomTarget');
$('#b3').addClass('dead')
$('.logo4').removeClass('active');
$('#b4').removeClass('alive');
$('#b4').removeClass('zoomTarget');
$('#b4').addClass('dead')
$('.logo5').removeClass('active');
$('#b5').removeClass('alive');
$('#b5').removeClass('zoomTarget');
$('#b5').addClass('dead')
$('.logo6').removeClass('active');
$('#b6').removeClass('alive');
$('#b6').removeClass('zoomTarget');
$('#b6').addClass('dead')
$('.logo7').removeClass('active');
$('#b7').removeClass('alive');
$('#b7').removeClass('zoomTarget');
$('#b7').addClass('dead')
$('.logo8').removeClass('active');
$('#b8').removeClass('alive');
$('#b8').removeClass('zoomTarget');
$('#b8').addClass('dead')
$('.logo9').removeClass('active');
$('#b9').removeClass('alive');
$('#b9').removeClass('zoomTarget');
$('#b9').addClass('dead');
$('#popoutPets').addClass('expand');
$('#popoutOwners').removeClass('expand');
$('.animated-circle').addClass('hide');
// $('.popout-instructions').addClass('hide');
// $('.popout-petowner-splice').removeClass('show');
// $('.popout-pet-splice').addClass('show');
});
$('.circle .semi-circle-2').on('click', function(){
$('.circle .semi-circle-1').removeClass('active');
$(this).addClass('active');
$('#logo').removeClass('pets');
$('.instructions-arrow-1').addClass('hide');
$('.instructions-arrow-2').removeClass('hide');
$('.petOwner').addClass('visualised');
$('.pet').removeClass('visualised');
$('.POTitle').addClass('actived');
$('.PTitle').removeClass('actived');
$('.div2').addClass('actived');
$('.div3').removeClass('actived');
$('.logo10').removeClass('active');
$('#b10').removeClass('alive');
$('#b10').removeClass('zoomTarget');
$('#b10').addClass('dead')
$('.logo11').removeClass('active');
$('#b11').removeClass('alive');
$('#b11').removeClass('zoomTarget');
$('#b11').addClass('dead')
$('.logo12').removeClass('active');
$('#b12').removeClass('alive');
$('#b12').removeClass('zoomTarget');
$('#b12').addClass('dead')
$('.logo13').removeClass('active');
$('#b13').removeClass('alive');
$('#b13').removeClass('zoomTarget');
$('#b13').addClass('dead')
$('.logo14').removeClass('active');
$('#b14').removeClass('alive');
$('#b14').removeClass('zoomTarget');
$('#b14').addClass('dead')
$('.logo15').removeClass('active');
$('#b15').removeClass('alive');
$('#b15').removeClass('zoomTarget');
$('#b15').addClass('dead');
$('#popoutOwners').addClass('expand');
$('#popoutPets').removeClass('expand');
$('.animated-circle').addClass('hide');
// $('.popout-instructions').addClass('hide');
// $('.popout-petowner-splice').addClass('show');
// $('.popout-pet-splice').removeClass('show');
});
$('.tooltip').hover(function(){
$('.description').addClass('show');
$('.tooltip').addClass('hovered')
},function(){
$('.description').removeClass('show');
$('.tooltip').removeClass('hovered');
});
// Mini Buttons Toggle
$('.logo1').on('click', function(e) {
$('.logo1').toggleClass("active");
$('#b1').toggleClass('alive');
$('#b1').toggleClass('zoomTarget');
$('#b1').toggleClass('dead');
$('#lets-go').addClass('actived');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
$('.logo2').on('click', function(e) {
$('.logo2').toggleClass("active");
$('#b2').toggleClass('alive');
$('#b2').toggleClass('zoomTarget');
$('#b2').toggleClass('dead');
$('#lets-go').addClass('actived');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
$('.logo3').on('click', function(e) {
$('.logo3').toggleClass("active");
$('#b3').toggleClass('alive');
$('#b3').toggleClass('zoomTarget');
$('#b3').toggleClass('dead');
$('#lets-go').addClass('actived');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
$('.logo4').on('click', function(e) {
$('.logo4').toggleClass("active");
$('#b4').toggleClass('alive');
$('#b4').toggleClass('zoomTarget');
$('#b4').toggleClass('dead');
$('#lets-go').addClass('actived');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
$('.logo5').on('click', function(e) {
$('.logo5').toggleClass("active");
$('#b5').toggleClass('alive');
$('#b5').toggleClass('zoomTarget');
$('#b5').toggleClass('dead');
$('#lets-go').addClass('actived');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
$('.logo6').on('click', function(e) {
$('.logo6').toggleClass("active");
$('#b6').toggleClass('alive');
$('#b6').toggleClass('zoomTarget');
$('#b6').toggleClass('dead');
$('#lets-go').addClass('actived');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
$('.logo7').on('click', function(e) {
$('.logo7').toggleClass("active");
$('#b7').toggleClass('alive');
$('#b7').toggleClass('zoomTarget');
$('#b7').toggleClass('dead');
$('#lets-go').addClass('actived');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
$('.logo8').on('click', function(e) {
$('.logo8').toggleClass("active");
$('#b8').toggleClass('alive');
$('#b8').toggleClass('zoomTarget');
$('#b8').toggleClass('dead');
$('#lets-go').addClass('actived');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
$('.logo9').on('click', function(e) {
$('.logo9').toggleClass("active");
$('#b9').toggleClass('alive');
$('#b9').toggleClass('zoomTarget');
$('#b9').toggleClass('dead');
$('#lets-go').addClass('actived');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
$('.logo10').on('click', function(e) {
$('.logo10').toggleClass("active");
$('#b10').toggleClass('alive');
$('#b10').toggleClass('zoomTarget');
$('#b10').toggleClass('dead');
$('#lets-go').addClass('actived');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
$('.logo11').on('click', function(e) {
$('.logo11').toggleClass("active");
$('#b11').toggleClass('alive');
$('#b11').toggleClass('zoomTarget');
$('#b11').toggleClass('dead');
$('#lets-go').addClass('actived');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
$('.logo12').on('click', function(e) {
$('.logo12').toggleClass("active");
$('#b12').toggleClass('alive');
$('#b12').toggleClass('zoomTarget');
$('#b12').toggleClass('dead');
$('#lets-go').addClass('actived');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
$('.logo13').on('click', function(e) {
$('.logo13').toggleClass("active");
$('#b13').toggleClass('alive');
$('#b13').toggleClass('zoomTarget');
$('#b13').toggleClass('dead');
$('#lets-go').addClass('actived');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
$('.logo14').on('click', function(e) {
$('.logo14').toggleClass("active");
$('#b14').toggleClass('alive');
$('#b14').toggleClass('zoomTarget');
$('#b14').toggleClass('dead');
$('#lets-go').addClass('actived');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
$('.logo15').on('click', function(e) {
$('.logo15').toggleClass("active");
$('#b15').toggleClass('alive');
$('#b15').toggleClass('zoomTarget');
$('#b15').toggleClass('dead');
$('#lets-go').addClass('actived');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});.jonsIdea {
position: relative;
height: 105vh;
width: 100vw;
overflow: hidden;
scroll-snap-type: y mandatory;
}
#centre-circle {
zoom: 0.95;
display: block;
margin-left: auto;
margin-right: auto;
opacity: 1;
visibility: visible;
transition: visibility 0.25s, opacity 0.25s linear;
-webkit-transition: visibility 0.25s, opacity 0.25s linear;
-moz-transition: visibility 0.25s, opacity 0.25s linear;
}
.circle {
width: 37vw;
height: 85vh;
border-radius: 50%;
margin: auto;
position: flex;
z-index: 1;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top:3vw;
visibility: visible;
opacity: 1;
transition: visibility 0.2s, opacity 0.2s linear;
-webkit-transition: visibility 0.2s, opacity 0.25s linear;
-moz-transition: visibility 0.2s, opacity 0.2s linear;
}
.semi-circle-1 {
height: 11vw;
width: 22vw;
border-radius: 11vw 11vw 0 0;
background-color: whitesmoke;
color:#0000a0;
font-weight: 400;
font-size: 1.042vw;
z-index: 2;
position: inherit;
display: inherit;
max-width: 30vw;
max-height: 15vw;
scroll-snap-align: start;
transition: box-shadow 0.2s linear;
}
.semi-circle-1:hover{
z-index: 1000000;
box-shadow: 0 0 0.425vw 0.334vw #0505b3;
}
.semi-circle-2:hover{
z-index: 1000000;
box-shadow: 0 0 0.425vw 0.334vw #ff1414;
}
.semi-circle-2.active {
background-color: white!important;
box-shadow: 0px -8px 1vw 0vw #ff1414;
z-index: 3;
}
.semi-circle-1.active {
background-color: white!important;
box-shadow: 0px -8px 1vw 0vw #0505b3;
z-index: 3;
}
.semi-circle-2 {
height: 11vw;
width: 22vw;
border-radius: 11vw 11vw 0 0;
background-color: whitesmoke;
color: red;
font-weight: 400;
font-size: 1.042vw;
z-index: 2;
transform: rotate(180deg);
transform-origin: center;
position: inherit;
display: inherit;
max-width: 30vw;
max-height: 15vw;
align-items: center;
transition: box-shadow 0.2s linear;
}
#poj {
position: inherit;
text-align: center;
transform: rotate(180deg);
transform-origin: center;
margin: auto;
}
#pot{
font-family: Arial;
font-size: 2.969vw;
margin-top: -8vh;
}
.orbit {
width: 27.3vw;
height: 27.3vw;
position: absolute;
transform-origin: center;
transform: rotate(90deg)
}
.div2 {
visibility: hidden;
transition: visibility 0s, opacity 0.5s linear;
-webkit-transition: visibility 0s, opacity 0.5s linear;
-moz-transition: visibility 0s, opacity 0.5s linear;
opacity: 0;
width: 2.083vw;
height: 2.083vw;
background-color: #ac5;
border-radius: 50%;
align-items: center;
justify-content: center;
}
.div2.actived{
display: inherit;
visibility: visible;
transition: visibility 0s, opacity 0.5s linear;
-webkit-transition: visibility 0s, opacity 0.5s linear;
-moz-transition: visibility 0s, opacity 0.5s linear;
opacity: 1;
}
.p1 {
position: absolute;
top: 23.317291666666666vw;
left: 25.3715625vw;
}
.p2 {
position: absolute;
top: 29.01760416666667vw;
left: 15.49828125vw;
}
.p3 {
position: absolute;
top: 27.037916666666668vw;
left: 4.270833333333333vw;
}
.p4 {
position: absolute;
top: 18.30447916666667vw;
left: -3.057375vw;
}
.p5 {
position: absolute;
top: 6.903854166666666vw;
left: -3.057375vw;
}
.p6 {
position: absolute;
top: -1.8295885416666668vw;
left:4.270833333333333vw;
}
.p7 {
position: absolute;
top: -3.809296875vw;
left: 15.49828125vw;
}
.p8 {
position: absolute;
top: 1.8910416666666667vw;
left: 25.3715625vw;
}
.p9 {
position: absolute;
top: 12.604166666666666vw;
left: 29.270833333333332vw;
}
.p10 {
position: absolute;
top: 27.037916666666668vw;
left: 20.9375vw;
}
.p11 {
position: absolute;
top: 27.037916666666668vw;
left: 4.270833333333333vw;
}
.p12 {
position: absolute;
top: 12.604166666666666vw;
left: -4.0625vw;
}
.p13 {
position: absolute;
top: -1.8295885416666668vw;
left: 4.270833333333333vw;
}
.p14 {
position: absolute;
top: -1.8295885416666668vw;
left: 20.9375vw;
}
.p15 {
position: absolute;
top: 12.604166666666666vw;
left: 29.270833333333332vw;
}
.div3 {
visibility: hidden;
transition: visibility 0s, opacity 0.5s linear;
-webkit-transition: visibility 0s, opacity 0.5s linear;
-moz-transition: visibility 0s, opacity 0.5s linear;
opacity: 0;
width: 2.083vw;
height: 2.083vw;
background-color: red;
border-radius: 50%;
align-items: center;
justify-content: center;
}
.div3.actived{
display: inherit;
visibility: visible;
transition: visibility 0s, opacity 0.5s linear;
-webkit-transition: visibility 0s, opacity 0.5s linear;
-moz-transition: visibility 0s, opacity 0.5s linear;
opacity: 1;
}
.div4 {
width: 2.083vw;
height: 2.083vw;
background-color: red;
border-radius: 50%
}
#logo {
position: block;
opacity: 1;
display: block;
left: -1.172vw;
top: -1.094vw;
width: 7vw;
height: 7vw;
background-color: white;
border-radius: 50%;
border: 0.208vw solid red;
transform: rotate(-90deg);
box-shadow: 0 0 0 0#ff1414;
transition: box-shadow 0.2s linear;
-webkit-transition: box-shadow 0.2s linear;
-moz-transition: box-shadow 0.2s linear;
}
#logo.active {
box-shadow: 0 0 0.625vw 0.234vw #ff1414;
}
.lg-circ{
font-family: Zooja;
color: white;
font-size:24px;
position: absolute;
}
.lg-circ p {
margin-top: 2vh;
margin-bottom: 1vh;
}
#lets-go {
color: white;
margin: 0;
display: inline-block;
text-decoration: none;
top: 50%;
cursor: pointer;
}
#lets-go {
border-radius: 50%;
margin: auto;
align-items: center;
height: 60px;
width: 60px;
background-color: red;
visibility: hidden;
transition: visibility 0s, opacity 0.5s linear;
-webkit-transition: visibility 0s, opacity 0.5s linear;
-moz-transition: visibility 0s, opacity 0.5s linear;
opacity: 0;
padding-top: 0px;
align-self: center;
line-height: 55px;
}
#lets-go.actived {
visibility: visible;
display: block;
transition: visibility 0s, opacity 0.5s linear;
-webkit-transition: visibility 0s, opacity 0.5s linear;
-moz-transition: visibility 0s, opacity 0.5s linear;
opacity: 1;
} <script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<div class="jonsIdea" id='jonsIdea'>
<div id="popoutLetsGo">
<div class="lg-circ">
<a id='lets-go'>Let's go!</a>
</div>
</div>
<g id='centre-circle'>
<div class="circle">
<div class="semi-circle semi-circle-1" id='petsSemi1'>
<section id='pets-J'>
<p>P1</p>
<img id='pets-logo' src="/static/images/mars/Mars Petcare Compact Frieze RGB.svg" alt="">
</section>
</div>
<div class='breaker'> '</div>
<div class="semi-circle semi-circle-2" id='petsSemi2'>
<section id='poj'>
<p id='pot'>P2</p>
</section>
</div>
<div class="orbit" id='orbit'>
<div class="animated-circle"></div>
<div class="div2 p1">
<img title='Banfield' class='logo1' id='logo' src="/static/images/businesses/Mars Petcare product logo web Banfield large.png" alt=""></div>
<div class="div2 p2">
<img title='Blue Pearl' class='logo2' id='logo' src="/static/images/businesses/Mars petcare product logo Blue Pearl large.png" alt=""></div>
<div class="div2 p3">
<img title='Pet Partners' class='logo3' id='logo' src="/static/images/businesses/ppl.png" alt=""></div>
<div class="div2 p4">
<img title='Pet Nutrition' class='logo4' id='logo' src="/static/images/businesses/mpn.png" alt=""></div>
<div class="div2 p5">
<img title='Puppo' class='logo5' id='logo' src="/static/images/businesses/Mars Petcare product logo web puppo large.png" alt=""></div>
<div class="div2 p6">
<img title='Royal Canin' class='logo6' id='logo' src="/static/images/businesses/royal-canin-squarelogo-1538592764738.png" alt="" srcset=""></div>
<div class="div2 p7">
<img title='VCA' class='logo7' id='logo' src="/static/images/businesses/Mars Petcare product logo web VCA large.png" alt="" srcset=""></div>
<div class="div2 p8">
<img title='Whistle' class='logo8' id='logo' src="/static/images/businesses/Mars Petcare product logo web Whistle large.png" alt="" srcset=""></div>
<div class="div2 p9" >
<img title='Wisdom' class='logo9' id='logo' src="/static/images/businesses/Wisdom Panel Logo.jpg" alt="" srcset=""></div>Upvotes: 0
Views: 47
Answers (1)
SirPilan
Reputation: 4857
You should consider refactoring your code quite a bit, there is a lot of work done over and over.
I removed the addClass("actived") from all the click handlers, added the class logo to all logo-classes and added a handler which will be called after click on logo after your hander is being called.
You can pretty much do all the logo work in the new handler I wrote.
$('.circle .semi-circle-1').on('click', function(){
$('.circle .semi-circle-2').removeClass('active');
$(this).addClass('active');
$('#logo').addClass('pets');
$('.pet').addClass('visualised');
$('.instructions-arrow-1').addClass('hide');
$('.instructions-arrow-2').removeClass('hide');
$('.petOwner').removeClass('visualised');
$('.PTitle').addClass('actived');
$('.POTitle').removeClass('actived');
$('.div3').addClass('actived');
$('.div2').removeClass('actived');
$('.logo1').removeClass('active');
$('#b1').removeClass('alive');
$('#b1').removeClass('zoomTarget');
$('#b1').addClass('dead')
$('.logo2').removeClass('active');
$('#b2').removeClass('alive');
$('#b2').removeClass('zoomTarget');
$('#b2').addClass('dead')
$('.logo3').removeClass('active');
$('#b3').removeClass('alive');
$('#b3').removeClass('zoomTarget');
$('#b3').addClass('dead')
$('.logo4').removeClass('active');
$('#b4').removeClass('alive');
$('#b4').removeClass('zoomTarget');
$('#b4').addClass('dead')
$('.logo5').removeClass('active');
$('#b5').removeClass('alive');
$('#b5').removeClass('zoomTarget');
$('#b5').addClass('dead')
$('.logo6').removeClass('active');
$('#b6').removeClass('alive');
$('#b6').removeClass('zoomTarget');
$('#b6').addClass('dead')
$('.logo7').removeClass('active');
$('#b7').removeClass('alive');
$('#b7').removeClass('zoomTarget');
$('#b7').addClass('dead')
$('.logo8').removeClass('active');
$('#b8').removeClass('alive');
$('#b8').removeClass('zoomTarget');
$('#b8').addClass('dead')
$('.logo9').removeClass('active');
$('#b9').removeClass('alive');
$('#b9').removeClass('zoomTarget');
$('#b9').addClass('dead');
$('#popoutPets').addClass('expand');
$('#popoutOwners').removeClass('expand');
$('.animated-circle').addClass('hide');
// $('.popout-instructions').addClass('hide');
// $('.popout-petowner-splice').removeClass('show');
// $('.popout-pet-splice').addClass('show');
});
$('.circle .semi-circle-2').on('click', function(){
$('.circle .semi-circle-1').removeClass('active');
$(this).addClass('active');
$('#logo').removeClass('pets');
$('.instructions-arrow-1').addClass('hide');
$('.instructions-arrow-2').removeClass('hide');
$('.petOwner').addClass('visualised');
$('.pet').removeClass('visualised');
$('.POTitle').addClass('actived');
$('.PTitle').removeClass('actived');
$('.div2').addClass('actived');
$('.div3').removeClass('actived');
$('.logo10').removeClass('active');
$('#b10').removeClass('alive');
$('#b10').removeClass('zoomTarget');
$('#b10').addClass('dead')
$('.logo11').removeClass('active');
$('#b11').removeClass('alive');
$('#b11').removeClass('zoomTarget');
$('#b11').addClass('dead')
$('.logo12').removeClass('active');
$('#b12').removeClass('alive');
$('#b12').removeClass('zoomTarget');
$('#b12').addClass('dead')
$('.logo13').removeClass('active');
$('#b13').removeClass('alive');
$('#b13').removeClass('zoomTarget');
$('#b13').addClass('dead')
$('.logo14').removeClass('active');
$('#b14').removeClass('alive');
$('#b14').removeClass('zoomTarget');
$('#b14').addClass('dead')
$('.logo15').removeClass('active');
$('#b15').removeClass('alive');
$('#b15').removeClass('zoomTarget');
$('#b15').addClass('dead');
$('#popoutOwners').addClass('expand');
$('#popoutPets').removeClass('expand');
$('.animated-circle').addClass('hide');
// $('.popout-instructions').addClass('hide');
// $('.popout-petowner-splice').addClass('show');
// $('.popout-pet-splice').removeClass('show');
});
$('.tooltip').hover(function(){
$('.description').addClass('show');
$('.tooltip').addClass('hovered')
},function(){
$('.description').removeClass('show');
$('.tooltip').removeClass('hovered');
});
// Mini Buttons Toggle
$('.logo1').on('click', function(e) {
$('.logo1').toggleClass("active");
$('#b1').toggleClass('alive');
$('#b1').toggleClass('zoomTarget');
$('#b1').toggleClass('dead');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide');
});
$('.logo2').on('click', function(e) {
$('.logo2').toggleClass("active");
$('#b2').toggleClass('alive');
$('#b2').toggleClass('zoomTarget');
$('#b2').toggleClass('dead');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide');
});
$('.logo3').on('click', function(e) {
$('.logo3').toggleClass("active");
$('#b3').toggleClass('alive');
$('#b3').toggleClass('zoomTarget');
$('#b3').toggleClass('dead');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide')
});
$('.logo4').on('click', function(e) {
$('.logo4').toggleClass("active");
$('#b4').toggleClass('alive');
$('#b4').toggleClass('zoomTarget');
$('#b4').toggleClass('dead');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide');
});
$('.logo5').on('click', function(e) {
$('.logo5').toggleClass("active");
$('#b5').toggleClass('alive');
$('#b5').toggleClass('zoomTarget');
$('#b5').toggleClass('dead');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide');
});
$('.logo6').on('click', function(e) {
$('.logo6').toggleClass("active");
$('#b6').toggleClass('alive');
$('#b6').toggleClass('zoomTarget');
$('#b6').toggleClass('dead');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide');
});
$('.logo7').on('click', function(e) {
$('.logo7').toggleClass("active");
$('#b7').toggleClass('alive');
$('#b7').toggleClass('zoomTarget');
$('#b7').toggleClass('dead');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide');
});
$('.logo8').on('click', function(e) {
$('.logo8').toggleClass("active");
$('#b8').toggleClass('alive');
$('#b8').toggleClass('zoomTarget');
$('#b8').toggleClass('dead');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide');
});
$('.logo9').on('click', function(e) {
$('.logo9').toggleClass("active");
$('#b9').toggleClass('alive');
$('#b9').toggleClass('zoomTarget');
$('#b9').toggleClass('dead');
$('#popoutLetsGo').addClass('expand');
$('.instructions-arrow-2').addClass('hide');
});
$('.logo').on('click', function(e) {
const hasActiveLogo = $('.logo.active').length > 0;
if(hasActiveLogo) {
$('#lets-go').addClass('actived');
} else {
$('#lets-go').removeClass('actived');
}
});.jonsIdea {
position: relative;
height: 105vh;
width: 100vw;
overflow: hidden;
scroll-snap-type: y mandatory;
}
#centre-circle {
zoom: 0.95;
display: block;
margin-left: auto;
margin-right: auto;
opacity: 1;
visibility: visible;
transition: visibility 0.25s, opacity 0.25s linear;
-webkit-transition: visibility 0.25s, opacity 0.25s linear;
-moz-transition: visibility 0.25s, opacity 0.25s linear;
}
.circle {
width: 37vw;
height: 85vh;
border-radius: 50%;
margin: auto;
position: flex;
z-index: 1;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top:3vw;
visibility: visible;
opacity: 1;
transition: visibility 0.2s, opacity 0.2s linear;
-webkit-transition: visibility 0.2s, opacity 0.25s linear;
-moz-transition: visibility 0.2s, opacity 0.2s linear;
}
.semi-circle-1 {
height: 11vw;
width: 22vw;
border-radius: 11vw 11vw 0 0;
background-color: whitesmoke;
color:#0000a0;
font-weight: 400;
font-size: 1.042vw;
z-index: 2;
position: inherit;
display: inherit;
max-width: 30vw;
max-height: 15vw;
scroll-snap-align: start;
transition: box-shadow 0.2s linear;
}
.semi-circle-1:hover{
z-index: 1000000;
box-shadow: 0 0 0.425vw 0.334vw #0505b3;
}
.semi-circle-2:hover{
z-index: 1000000;
box-shadow: 0 0 0.425vw 0.334vw #ff1414;
}
.semi-circle-2.active {
background-color: white!important;
box-shadow: 0px -8px 1vw 0vw #ff1414;
z-index: 3;
}
.semi-circle-1.active {
background-color: white!important;
box-shadow: 0px -8px 1vw 0vw #0505b3;
z-index: 3;
}
.semi-circle-2 {
height: 11vw;
width: 22vw;
border-radius: 11vw 11vw 0 0;
background-color: whitesmoke;
color: red;
font-weight: 400;
font-size: 1.042vw;
z-index: 2;
transform: rotate(180deg);
transform-origin: center;
position: inherit;
display: inherit;
max-width: 30vw;
max-height: 15vw;
align-items: center;
transition: box-shadow 0.2s linear;
}
#poj {
position: inherit;
text-align: center;
transform: rotate(180deg);
transform-origin: center;
margin: auto;
}
#pot{
font-family: Arial;
font-size: 2.969vw;
margin-top: -8vh;
}
.orbit {
width: 27.3vw;
height: 27.3vw;
position: absolute;
transform-origin: center;
transform: rotate(90deg)
}
.div2 {
visibility: hidden;
transition: visibility 0s, opacity 0.5s linear;
-webkit-transition: visibility 0s, opacity 0.5s linear;
-moz-transition: visibility 0s, opacity 0.5s linear;
opacity: 0;
width: 2.083vw;
height: 2.083vw;
background-color: #ac5;
border-radius: 50%;
align-items: center;
justify-content: center;
}
.div2.actived{
display: inherit;
visibility: visible;
transition: visibility 0s, opacity 0.5s linear;
-webkit-transition: visibility 0s, opacity 0.5s linear;
-moz-transition: visibility 0s, opacity 0.5s linear;
opacity: 1;
}
.p1 {
position: absolute;
top: 23.317291666666666vw;
left: 25.3715625vw;
}
.p2 {
position: absolute;
top: 29.01760416666667vw;
left: 15.49828125vw;
}
.p3 {
position: absolute;
top: 27.037916666666668vw;
left: 4.270833333333333vw;
}
.p4 {
position: absolute;
top: 18.30447916666667vw;
left: -3.057375vw;
}
.p5 {
position: absolute;
top: 6.903854166666666vw;
left: -3.057375vw;
}
.p6 {
position: absolute;
top: -1.8295885416666668vw;
left:4.270833333333333vw;
}
.p7 {
position: absolute;
top: -3.809296875vw;
left: 15.49828125vw;
}
.p8 {
position: absolute;
top: 1.8910416666666667vw;
left: 25.3715625vw;
}
.p9 {
position: absolute;
top: 12.604166666666666vw;
left: 29.270833333333332vw;
}
.p10 {
position: absolute;
top: 27.037916666666668vw;
left: 20.9375vw;
}
.p11 {
position: absolute;
top: 27.037916666666668vw;
left: 4.270833333333333vw;
}
.p12 {
position: absolute;
top: 12.604166666666666vw;
left: -4.0625vw;
}
.p13 {
position: absolute;
top: -1.8295885416666668vw;
left: 4.270833333333333vw;
}
.p14 {
position: absolute;
top: -1.8295885416666668vw;
left: 20.9375vw;
}
.p15 {
position: absolute;
top: 12.604166666666666vw;
left: 29.270833333333332vw;
}
.div3 {
visibility: hidden;
transition: visibility 0s, opacity 0.5s linear;
-webkit-transition: visibility 0s, opacity 0.5s linear;
-moz-transition: visibility 0s, opacity 0.5s linear;
opacity: 0;
width: 2.083vw;
height: 2.083vw;
background-color: red;
border-radius: 50%;
align-items: center;
justify-content: center;
}
.div3.actived{
display: inherit;
visibility: visible;
transition: visibility 0s, opacity 0.5s linear;
-webkit-transition: visibility 0s, opacity 0.5s linear;
-moz-transition: visibility 0s, opacity 0.5s linear;
opacity: 1;
}
.div4 {
width: 2.083vw;
height: 2.083vw;
background-color: red;
border-radius: 50%
}
#logo {
position: block;
opacity: 1;
display: block;
left: -1.172vw;
top: -1.094vw;
width: 7vw;
height: 7vw;
background-color: white;
border-radius: 50%;
border: 0.208vw solid red;
transform: rotate(-90deg);
box-shadow: 0 0 0 0#ff1414;
transition: box-shadow 0.2s linear;
-webkit-transition: box-shadow 0.2s linear;
-moz-transition: box-shadow 0.2s linear;
}
#logo.active {
box-shadow: 0 0 0.625vw 0.234vw #ff1414;
}
.lg-circ{
font-family: Zooja;
color: white;
font-size:24px;
position: absolute;
}
.lg-circ p {
margin-top: 2vh;
margin-bottom: 1vh;
}
#lets-go {
color: white;
margin: 0;
display: inline-block;
text-decoration: none;
top: 50%;
cursor: pointer;
}
#lets-go {
border-radius: 50%;
margin: auto;
align-items: center;
height: 60px;
width: 60px;
background-color: red;
visibility: hidden;
transition: visibility 0s, opacity 0.5s linear;
-webkit-transition: visibility 0s, opacity 0.5s linear;
-moz-transition: visibility 0s, opacity 0.5s linear;
opacity: 0;
padding-top: 0px;
align-self: center;
line-height: 55px;
}
#lets-go.actived {
visibility: visible;
display: block;
transition: visibility 0s, opacity 0.5s linear;
-webkit-transition: visibility 0s, opacity 0.5s linear;
-moz-transition: visibility 0s, opacity 0.5s linear;
opacity: 1;
}<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<div class="jonsIdea" id='jonsIdea'>
<div id="popoutLetsGo">
<div class="lg-circ">
<a id='lets-go'>Let's go!</a>
</div>
</div>
<g id='centre-circle'>
<div class="circle">
<div class="semi-circle semi-circle-1" id='petsSemi1'>
<section id='pets-J'>
<p>P1</p>
<img id='pets-logo' src="/static/images/mars/Mars Petcare Compact Frieze RGB.svg" alt="">
</section>
</div>
<div class='breaker'> '</div>
<div class="semi-circle semi-circle-2" id='petsSemi2'>
<section id='poj'>
<p id='pot'>P2</p>
</section>
</div>
<div class="orbit" id='orbit'>
<div class="animated-circle"></div>
<div class="div2 p1">
<img title='Banfield' class='logo logo1' id='logo' src="/static/images/businesses/Mars Petcare product logo web Banfield large.png" alt=""></div>
<div class="div2 p2">
<img title='Blue Pearl' class='logo logo2' id='logo' src="/static/images/businesses/Mars petcare product logo Blue Pearl large.png" alt=""></div>
<div class="div2 p3">
<img title='Pet Partners' class='logo logo3' id='logo' src="/static/images/businesses/ppl.png" alt=""></div>
<div class="div2 p4">
<img title='Pet Nutrition' class='logo logo4' id='logo' src="/static/images/businesses/mpn.png" alt=""></div>
<div class="div2 p5">
<img title='Puppo' class='logo logo5' id='logo' src="/static/images/businesses/Mars Petcare product logo web puppo large.png" alt=""></div>
<div class="div2 p6">
<img title='Royal Canin' class='logo logo6' id='logo' src="/static/images/businesses/royal-canin-squarelogo-1538592764738.png" alt="" srcset=""></div>
<div class="div2 p7">
<img title='VCA' class='logo logo7' id='logo' src="/static/images/businesses/Mars Petcare product logo web VCA large.png" alt="" srcset=""></div>
<div class="div2 p8">
<img title='Whistle' class='logo logo8' id='logo' src="/static/images/businesses/Mars Petcare product logo web Whistle large.png" alt="" srcset=""></div>
<div class="div2 p9" >
<img title='Wisdom' class='logo logo9' id='logo' src="/static/images/businesses/Wisdom Panel Logo.jpg" alt="" srcset=""></div>Upvotes: 1
Related Questions
- hide button based on condition with jquery
- disable button in case of empty element in class
- Hide class if other class exists
- JQuery hide a div if a button contain specific class name
- Hide conditionally button with CSS or Javascript
- disable button when class on li doesnt exist
- Check If button has class and then show a div
- Hide button based on class using jquery
- Jquery: if class exists in element hide element
- How do you retrieve the class to hide the button?