I am trying to slide a sibling element (yellow) over another sibling element (red) making sure that the yellow never slides over the blue elements, only the red, but I am having a lot of issues with z-indexes. Is there a way to achieve this without z-index maybe? And is it possible to have multiple yellow and red elements in different positions where the yellow element always slides over the red element?
See my progress here, currently the yellow slides over the blue element: https://jsfiddle.net/0qf95eap/25/
JS:
$( document ).ready(function() {
var slideToLeft = $('.yellow');
slideToLeft.show();
slideToLeft.css('z-index','5');
slideToLeft.prev().css('z-index','1');
slideToLeft.next().css('z-index','1');
slideToLeft.nextUntil(".row").css('z-index','10');
slideToLeft.animate({right: "25%"}, 2000);
slideToLeft.prevUntil(".row").css('z-index','5');
slideToLeft.animate({right: "50%"}, 2000);
});
HTML:
<ul>
<li class="blue row"></li>
<li class="blue"></li>
<li class="red"></li>
<li class="yellow"></li>
<li class="blue"></li>
<li class="blue row"></li>
<li class="blue"></li>
<li class="blue "></li>
<li class="blue"></li>
<li class="blue row"></li>
<li class="blue"></li>
<li class="blue"></li>
<li class="blue"></li>
</ul>
CSS:
* {
border: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
width: 100%;
height: 100%;
}
li {
display: inline-block;
width: 25%;
height: 200px;
float: left;
position: relative;
border: 1px solid white;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
display: none;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.previous {
position: relative;
z-index: 3 !important;
}
.next {
z-index: 9;
}
This works.
$( document ).ready(function() {
var elements = $('.yellow');
for(var i=0;i<elements.length;i++)
{
$(elements[i]).show().css('z-index','50').animate({left: "-100%"}, 2000);
}
});
* {
border: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
width: 100%;
height: 100%;
}
li {
display: inline-block;
width: 25%;
height: 200px;
float: left;
position: relative;
border: 1px solid white;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
z-index:100;
}
.yellow {
background-color: yellow;
position: absolute;
display: none;
height: 100%;
width: 100%;
left: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="blue row"></li>
<li class="blue"></li>
<li class="red"><div class="yellow">
</div></li>
<li class="blue"></li>
<li class="blue"></li>
<li class="red"><div class="yellow">
</div></li>
<li class="blue"></li>
<li class="blue "></li>
<li class="blue"></li>
<li class="blue row"></li>
<li class="red"><div class="yellow">
</div></li>
<li class="blue"></li>
<li class="blue"></li>
</ul>
You can set z-index in the CSS and only for the blue elements.
blue needs to be on top of red and yellow. z-index:1 + position:relative can be set
yellow needs to be on top of red. position:absolute + being next, it will do itself (defaut z-index is 0 ).
red do not need a z-index and can skip the position:relative; to avoid bringing it at top.
$( document ).ready(function() {
var slideToLeft = $('.yellow');
slideToLeft.show();
slideToLeft.animate({right: "25%"}, 2000);
slideToLeft.animate({right: "50%"}, 2000);
});
* {
border: 0;
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul {
width: 100%;
height: 100%;
list-style:none;
}
li {
width: 25%;
height: 200px;
float: left;
border: 1px solid white;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
position:relative;
z-index:1;
}
.yellow {
background-color: yellow;
position: absolute;
right: 0;
top: 0;
}
.previous {
}
.next {
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="blue row"></li>
<li class="blue"></li>
<li class="red"></li>
<li class="yellow"></li>
<li class="blue"></li>
<li class="blue row"></li>
<li class="blue"></li>
<li class="blue "></li>
<li class="blue"></li>
<li class="blue row"></li>
<li class="blue"></li>
<li class="blue"></li>
<li class="blue"></li>
</ul>
https://jsfiddle.net/0qf95eap/76/
Related
I am creating a drop down menu that shows a submenu when clicked instead of using hover.
When I click it is displayed as it should be but I would like that when I click on another option the previous one is hidden and not kept open as right now.
In advance, thank you very much to the person who takes the trouble to help me, here is the code I'm working with.
$('.parent a').on("click", function(e) {
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>
Move the display logic to ".active" selector in css,
.active {
display: block;
}
then try the following script.
It would check if the click is not inside current menu, if the click is anywhere but current menu, active class will be removed.
var menu = $('.parent a').next('ul')
$(document).mouseup(e => {
if (!menu.is(e.target) // if the target of the click isn't the container...
&& menu.has(e.target).length === 0) // ... nor a descendant of the container
{
menu.removeClass("active");
}
});
$('.parent a').on("click", function (e) {
$(this).next('ul').toggleClass("active");
e.stopPropagation();
e.preventDefault();
});
Here's the full code,
var menu = $('.parent a').next('ul')
$(document).mouseup(e => {
if (!menu.is(e.target) // if the target of the click isn't the container...
&& menu.has(e.target).length === 0) // ... nor a descendant of the container
{
menu.removeClass("active");
}
});
$('.parent a').on("click", function (e) {
$(this).next('ul').toggleClass("active");
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.active {
display: block;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>
using siblings(), you have quickest solution:
parents("li.parent").last() keeps the highest parent li.parent of selected item
.sibling() keeps all others li.parent brothers (of main menu)
.find("ul") keeps all ul children from all li.parent brothers
$('.parent a').on("click", function(e) {
$(this).parents("li.parent").last().siblings().find("ul").hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
$('.parent a').on("click", function(e) {
$(this).parents("li.parent").last().siblings().find("ul").hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #4FA0D8;
border-right: #CCC 1px solid;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent>ul {
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #E4EFF7;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #000000;
}
ul {
list-style: none;
margin: 0;
padding: 0px;
min-width: 10em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #F0F0F0;
}
.expand {
font-size: 12px;
float: right;
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
<li class="parent">Popular Toys
<ul class="child">
<li class="parent">Video Games <span class="expand">»</span>
<ul class="child">
<li>Car</li>
<li>Bike Race</li>
<li>Fishing</li>
</ul>
</li>
<li>Barbies</li>
<li>Teddy Bear</li>
<li>Golf Set</li>
</ul>
</li>
<li class="parent">Recent Toys
<ul class="child">
<li>Yoyo</li>
<li>Doctor Kit</li>
<li class="parent">Fun Puzzle<span class="expand">»</span>
<ul class="child">
<li><a href="#" nowrap>Cards</a></li>
<li><a href="#" nowrap>Numbers</a></li>
</ul>
</li>
<li>Uno Cards</li>
</ul>
</li>
<li class="parent">Toys Category
<ul class="child">
<li>Battery Toys</li>
<li class="parent">Remote Toys <span class="expand">»</span>
<ul class="child">
<li>Cars</li>
<li>Aeroplane</li>
<li>Helicopter</li>
</ul>
</li>
<li>Soft Toys
</li>
<li>Magnet Toys</li>
</ul>
</li>
</ul>
You could try with
$('.parent a').on("click", function (e) {
$('.parent ul').hide();
$(this).next('ul').toggle();
e.stopPropagation();
e.preventDefault();
});
I'm working on the responsive menu. when we resize the screen menu items will be appear down is working fine but the problem is onClick on red button is working fine. When I refresh the page all items visible. I want before it will be hidden on click the red button then the menu will appear.
It is coming like this i want to hide overflow menu
onClick working fine. Before the click, it will be hidden
I have taken inspiration from here
var h = 30;
var val = 0;
$('.click').click(function() {
if ($('ul li.menu-item').hasClass('show')) {
$('ul li.menu-item').removeClass('show');
$('ul li.menu-item').removeClass('drop')
return;
}
val = 0;
$('ul li.menu-item').each(function() {
var of = $(this).offset().top - $('ul li.menu-item').offset().top;
if ( of > 20) {
$(this).addClass('drop').css('opcaity', '1');;
$(this).css('top', 'calc(100% + ' + val + 'px)');
val += h;
}
$('ul li.menu-item').addClass('show');
})
})
.primary-menu {
position: relative;
width: 64%;
margin: 0 auto;
max-height: 50px;
overflow: hiddin;
background: #ccc;
}
ul.menu-item {
box-sizing: border-box;
position: relative;
}
.menu-item {
display: inline-block;
text-decoration: none;
color: #000000;
font-size: 20px;
padding: 10px;
text-transform: capitalize;
list-style: none;
background-color: #88c0c7;
position: relative;
}
li.drop {
display: block;
position: absolute;
right: 0;
}
ul.sub-menu {
flex-direction: column;
position: absolute;
top: 52px;
display: none;
background-color: #000;
color: #fff;
}
.menu-item:hover ul.sub-menu {
display: block;
}
.drop ul.sub-menu {
position: absolute;
top: 36%;
left: -72%;
}
.click {
position: absolute;
opacity: 0;
background: red;
right: -5%;
top: -2%;
width: 40px;
height: 40px;
margin: 4px;
z-index: 2;
}
.hide {
opacity: 0;
}
/* Small Desktop Resolution and iPad Landscape
======================================================================== */
#media only screen and (min-width: 960px) and (max-width: 1024px) {
.click {
opacity: 1;
right: 2%;
}
}
/* iPad Portrait
======================================================================== */
#media only screen and (min-width: 768px) and (max-width: 959px) {
.click {
opacity: 1;
right: 2%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="primary-menu">
<ul>
<li class="menu-item">Home
<ul class="sub-menu">
<li class="sub-item">menu1</li>
<li class="sub-item">menu2</li>
<li class="sub-item">menu3</li>
</ul>
</li>
<li class="menu-item">About us</li>
<li class="menu-item">Service
<ul class="sub-menu">
<li class="sub-item">menu1</li>
<li class="sub-item">menu2</li>
<li class="sub-item">menu3</li>
</ul>
</li>
<li class="menu-item">product</li>
<li class="menu-item">packages</li>
<li class="menu-item">contact</li>
<li class="menu-item">menu7</li>
<li class="menu-item">menu8</li>
<li class="menu-item">menu9</li>
<li class="menu-item">menu10</li>
<li class="menu-item">menu11
<ul class="sub-menu">
<li class="sub-item">menu1</li>
<li class="sub-item">menu2</li>
<li class="sub-item">menu3</li>
</ul>
</li>
<li class="menu-item">menu12</li>
<li class="menu-item">menu13</li>
<li class="menu-item">menu14
<ul class="sub-menu">
<li class="sub-item">menu1</li>
<li class="sub-item">menu2</li>
<li class="sub-item">menu3</li>
</ul>
</li>
</ul>
<div class="click"></div>
</div>
hope this will be useful.
var h = 30;
var val = 0;
$('ul li.menu-item').each(function() {
var of = $(this).offset().top - $('ul li.menu-item').offset().top;
if ( of > 20) {
$(this).addClass('hide');
}
})
$('.click').click(function() {
if ($('ul li.menu-item').hasClass('hide')) {
$('ul li.menu-item').removeClass('hide');
}
$('ul li.menu-item').each(function() {
if($(this).hasClass('drop')){
$(this).addClass('hide');
}
});
if ($('ul li.menu-item').hasClass('show')) {
$('ul li.menu-item').removeClass('show');
$('ul li.menu-item').removeClass('drop')
return;
}
val = 0;
$('ul li.menu-item').each(function() {
var of = $(this).offset().top - $('ul li.menu-item').offset().top;
if ( of > 20) {
$(this).addClass('drop').css('opcaity', '1');;
$(this).css('top', 'calc(100% + ' + val + 'px)');
val += h;
}
$('ul li.menu-item').addClass('show');
})
})
.primary-menu {
position: relative;
width: 100%;
margin: 0 auto;
max-height: 50px;
overflow: hiddin;
background: #ccc;
}
ul.menu-item {
box-sizing: border-box;
position: relative;
}
.menu-item {
display: inline-block;
text-decoration: none;
color: #000000;
font-size: 20px;
padding: 10px;
text-transform: capitalize;
list-style: none;
background-color: #88c0c7;
position: relative;
}
li.drop {
display: block;
position: absolute;
right: 0;
}
ul.sub-menu {
flex-direction: column;
position: absolute;
top: 52px;
display: none;
background-color: #000;
color: #fff;
}
.menu-item:hover ul.sub-menu {
display: block;
}
.drop ul.sub-menu {
position: absolute;
top: 36%;
left: -72%;
}
.click {
position: absolute;
opacity: 0;
background: red;
right: -5%;
top: -2%;
width: 40px;
height: 40px;
margin: 4px;
z-index: 2;
}
.hide {
opacity: 0;
}
/* Small Desktop Resolution and iPad Landscape
======================================================================== */
#media only screen and (min-width: 960px) and (max-width: 1024px) {
.click {
opacity: 1;
right: 2%;
}
}
/* iPad Portrait
======================================================================== */
#media only screen and (min-width: 768px) and (max-width: 959px) {
.click {
opacity: 1;
right: 2%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="primary-menu">
<ul>
<li class="menu-item">Home
<ul class="sub-menu">
<li class="sub-item">menu1</li>
<li class="sub-item">menu2</li>
<li class="sub-item">menu3</li>
</ul>
</li>
<li class="menu-item">About us</li>
<li class="menu-item">Service
<ul class="sub-menu">
<li class="sub-item">menu1</li>
<li class="sub-item">menu2</li>
<li class="sub-item">menu3</li>
</ul>
</li>
<li class="menu-item">product</li>
<li class="menu-item">packages</li>
<li class="menu-item">contact</li>
<li class="menu-item">menu7</li>
<li class="menu-item">menu8</li>
<li class="menu-item">menu9</li>
<li class="menu-item">menu10</li>
<li class="menu-item">menu11
<ul class="sub-menu">
<li class="sub-item">menu1</li>
<li class="sub-item">menu2</li>
<li class="sub-item">menu3</li>
</ul>
</li>
<li class="menu-item">menu12</li>
<li class="menu-item">menu13</li>
<li class="menu-item">menu14
<ul class="sub-menu">
<li class="sub-item">menu1</li>
<li class="sub-item">menu2</li>
<li class="sub-item">menu3</li>
</ul>
</li>
</ul>
<div class="click"></div>
</div>
Above is the result I want, each drop-down list is under the main title.
For example:
A1, A2, A3, A4 is under A when I click the expand collapse button.
B1, B2, B3, B4 is under B when I click the second expand collapse button.
But now my drop-down list is not aligned accordingly. You can check my code for more details. Hoping that some of you could provide me with some advice.
$(".es_epdtitle").click(function() {
$('.es_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle1").click(function() {
$('.es_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle2").click(function() {
$('.es_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
ul { list-style-type: none; margin:0; padding: 0; }
.eservices_left ul li{display:inline;}
.es_expandct, .es_expandct1, .es_expandct2 {
display: none;
position:absolute;
padding-top: 20px;
margin: 0 10px;
}
.es_epdtitle, .es_epdtitle1, .es_epdtitle2{
background:url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
width: 30%;
float:left;
background-position:right 0px;
cursor:pointer;
background-color:#ccc;
margin: 0 10px;
}
.collapsed .es_epdtitle, .collapsed .es_epdtitle1, .collapsed .es_epdtitle2{
background-image:url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
width: 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle">A</div>
<ul class="es_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle1">B</div>
<ul class="es_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="text_maroon_16_bold es_epdtitle2">C</div>
<ul class="es_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>
Add position:relative to parent to make the drop-down position according to it and move float and width from text_maroon_16.. to the parent mobexpand to maintain the width and the style
See code snippet:
$(".es_epdtitle").click(function() {
$('.es_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle1").click(function() {
$('.es_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle2").click(function() {
$('.es_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.eservices_left ul li {
display: inline;
}
.es_expandct,
.es_expandct1,
.es_expandct2 {
display: none;
position: absolute;
margin: 0 10px;
}
.es_epdtitle,
.es_epdtitle1,
.es_epdtitle2 {
background: url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
background-position: right 0px;
cursor: pointer;
background-color: #ccc;
margin: 0 10px;
}
.collapsed .es_epdtitle,
.collapsed .es_epdtitle1,
.collapsed .es_epdtitle2 {
background-image: url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
.mobexpand {
position: relative;
width: 30%;
float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle">A</div>
<ul class="es_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle1">B</div>
<ul class="es_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="text_maroon_16_bold es_epdtitle2">C</div>
<ul class="es_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>
You could always use flex:
$(".es_epdtitle").click(function() {
$('.es_expandct').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle1").click(function() {
$('.es_expandct1').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
$(".es_epdtitle2").click(function() {
$('.es_expandct2').slideToggle().toggleClass('active');
$(this).closest('.mobexpand').toggleClass('collapsed');
});
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.eservices_left ul li {
display: inline;
}
.es_expandct,
.es_expandct1,
.es_expandct2 {
display: none;
position: absolute;
padding: 5px;
}
.es_epdtitle,
.es_epdtitle1,
.es_epdtitle2 {
background: url('https://image.ibb.co/jUyN5Q/arrow_up_grey.png') no-repeat;
width: 100%;
background-position: right center;
cursor: pointer;
background-color: #ccc;
padding: 5px;
margin: 0;
}
.collapsed .es_epdtitle,
.collapsed .es_epdtitle1,
.collapsed .es_epdtitle2 {
background-image: url('https://image.ibb.co/d669kQ/arrow_down_grey.png');
}
.main-ul {
display: flex;
}
.mobexpand {
padding: 10px;
flex: 1 0 33.33%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-ul">
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle">A</div>
<ul class="es_expandct">
<li>A1</li>
<li>A2</li>
</ul>
</li>
<li class="mobexpand collapsed">
<div class="text_maroon_16_bold es_epdtitle1">B</div>
<ul class="es_expandct1">
<li>B1</li>
<li>B2</li>
</ul>
</li>
<li class="mobexpand collapsed noborder">
<div class="text_maroon_16_bold es_epdtitle2">C</div>
<ul class="es_expandct2">
<li>C1</li>
<li>C2</li>
</ul>
</li>
</ul>
Can anyone show me how I can achieve moving .showBorder and .box-tip when .clicked is selected. So when tab is selected the tabs below will have a border selected with above text moving along. only require one tab and one border to be selected at one time. Here's my code so far:
$(document).on("click", '.clicked', function(){
$('.clicked').removeClass('selected');
$(this).addClass('selected');
});
.list-box li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.list-box {margin:25px auto;padding:0;}
.box-sleeve li {display: inline-block;list-style-type: none;padding: 1em;background:red;}
.box-sleeve {margin:25px auto;padding:0;}
.showBorder { border: 3px dashed black; }
.box-tip {
display:inline;
margin: auto;
position: relative;
}
.numberCircle {
border-radius: 50%;
font-size: 12px;
border: 5px solid #000;
color: #fff;
background: #000;
}
.numberCircle span {
text-align: center;
display: block;
}
li.selected {color:#fff;background-color:#000;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="list-box">
<li class="clicked">1</li>
<li class="clicked">2</li>
<li class="clicked">3</li>
<li class="clicked">4</li>
<li class="clicked">5</li>
<li class="clicked">6</li>
<li class="clicked">7</li>
<li class="clicked">8</li>
</ul>
<div class="box-tip">
<span class="info">Regular length for your collar size</span>
<span class="numberCircle">?</span>
</div>
<ul class="box-sleeve">
<li class="border">a</li>
<li class="border">b</li>
<li class="border showBorder">c</li>
<li class="border">d</li>
<li class="border">e</li>
<li class="border">f</li>
<li class="border">g</li>
<li class="border">h</li>
</ul>
Use .index(element) to get the position of the element relative to its siblings.
Use .eq(index) to get the element at index position in another element.
So it would look like this:
$(document).on("click", '.clicked', function() {
var boxes = $('.list-box li'),
sleeves = $('.box-sleeve li'),
tip = $('.box-tip .info');
var currBox = $(this),
currSleeve = sleeves.eq(boxes.index(currBox));
// select box and sleeve
boxes.removeClass('selected');
currBox.addClass('selected');
sleeves.removeClass('showBorder');
currSleeve.addClass('showBorder');
// move tip
tip.css('left', currBox.position().left - 100);
});
.container {
/* to center both list */
text-align: center;
}
.list-box {
margin: 25px auto;
padding: 0;
}
.list-box li {
display: inline-block;
list-style-type: none;
padding: 1em;
background: red;
}
.list-box li.selected {
color: #fff;
background-color: #000;
}
.box-sleeve {
margin: 25px auto;
padding: 0;
}
.box-sleeve li {
display: inline-block;
list-style-type: none;
padding: 1em;
background: red;
}
.showBorder {
border: 3px dashed black;
}
.box-tip {
/*border: 1px solid #ddd;*/
position: relative;
height: 25px;
line-height: 25px;
}
.box-tip .info {
position: absolute;
/* to ensure that it one liner */
white-space: nowrap;
/* default text position */
left: 120px;
}
.numberCircle {
border-radius: 50%;
font-size: 12px;
border: 5px solid #000;
color: #fff;
background: #000;
}
.numberCircle span {
text-align: center;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- wrap everything in a container, so that we can center them -->
<div class="container">
<ul class="list-box">
<li class="clicked">1</li>
<li class="clicked">2</li>
<li class="clicked">3</li>
<li class="clicked">4</li>
<li class="clicked">5</li>
<li class="clicked">6</li>
<li class="clicked">7</li>
<li class="clicked">8</li>
</ul>
<div class="box-tip">
<!-- this will be absolutely positioned to have flexibility in moving it -->
<span class="info">Regular length for your collar size <span class="numberCircle">?</span></span>
</div>
<ul class="box-sleeve">
<li class="border">a</li>
<li class="border">b</li>
<li class="border">c</li>
<li class="border">d</li>
<li class="border">e</li>
<li class="border">f</li>
<li class="border">g</li>
<li class="border">h</li>
</ul>
</div>
Edit
You can use .position() to get the position of your selected box and use it to calculate the position of the .box-tip. Though, you'll notice it requires some changes to the HTML and CSS (see comments) to ensure that it is always centered.
I am attempting to get the following code snippet to work the way I want it to. I only want the sub-menu to slide back to the right when the "li" element with the class "back" is selected. Right now, when any element is clicked, the sub-menu slides back to the right. I have tried the following code to no avail, but believe it is sort of on the right track:
$(function() {
$('.section').click( function() {
$(this).find('ul').animate( {
left: "0"
}, 1000 );
}).children().click( function() {
var selected = this;
console.debug(selected);
if ($(this).hasClass("back")) {
$('.sub-menu').animate( {
left: "485"
}, 1000 );
}
else {
return false;
}
});
});
I believe that it isn't recognizing the nested LI element with the class "back" as being any different then the original "sub-menu" ul. I also tried
.children(":not(.back)").click( function() {
return false;
}
Which did not work.
$(function() {
$('.section').click( function() {
$(this).find('ul').animate( {
left: "0"
}, 1000 );
}).children().click( function() {
$('.sub-menu').animate( {
left: "485"
}, 1000 );
return false;
});
});
ul {
margin: 0;
padding:0;
list-style-type: none;
}
li {
background-color: green;
color: white;
border-bottom: 1px solid #fff;
width: 100%;
height: 20px;
font-size: 16px;
text-align: center;
}
a {
display: block;
width: 100%;
height: 100%;
color: #fff;
}
.container {
margin: auto;
max-width:480px;
width: 480px;
height: 736px;
border: 1px solid black;
overflow-x: visible;
position: relative;
}
.menu {
position: relative;
z-index: 1;
}
.main-menu {
position: relative;
}
.sub-menu {
position: absolute;
z-index:2;
width: 100%;
display: inline;
left: 485px;
top: 0;
}
.sub-menu li {
background-color: blue !important;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="container">
<div class="menu">
<ul class="main-menu">
<li class="section">
Section 1
<ul class="sub-menu" style="z-index: 3;">
<li>
Section 1A
</li>
<li>
Section 1B
</li>
<li>
Section 1C
</li>
<li class="back">
Back
</li>
</ul>
</li>
<li class="section">
Section 2
<ul class="sub-menu" style="z-index: 2;">
<li>
Section 2A
</li>
<li>
Section 2B
</li>
<li>
Section 2C
</li>
<li class="back">
Back
</li>
</ul>
</li>
</ul>
</div>
</div>
You can change .children().click(....) to .find(".back").click(....) because children() will select the ul element not the lis.
This should work.
$(function() {
$('.section').click( function() {
$(this).find('ul').animate( {
left: "0"
}, 1000 );
}).find(".back").click( function() {
$(this).parent().animate( {
left: "485"
}, 1000 );
});
});
You could have a jquery click on back that animates the parent.
$(function() {
$('.section').click( function() {
$(this).find('ul').animate( {
left: "0"
}, 1000 );
})
$('.back').click( function() {
$(this).parent().animate( {
left: "485"
}, 1000 );
return false;
});
});
ul {
margin: 0;
padding:0;
list-style-type: none;
}
li {
background-color: green;
color: white;
border-bottom: 1px solid #fff;
width: 100%;
height: 20px;
font-size: 16px;
text-align: center;
}
a {
display: block;
width: 100%;
height: 100%;
color: #fff;
}
.container {
margin: auto;
max-width:480px;
width: 480px;
height: 736px;
border: 1px solid black;
overflow-x: visible;
position: relative;
}
.menu {
position: relative;
z-index: 1;
}
.main-menu {
position: relative;
}
.sub-menu {
position: absolute;
z-index:2;
width: 100%;
display: inline;
left: 485px;
top: 0;
}
.sub-menu li {
background-color: blue !important;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="container">
<div class="menu">
<ul class="main-menu">
<li class="section">
Section 1
<ul class="sub-menu" style="z-index: 3;">
<li>
Section 1A
</li>
<li>
Section 1B
</li>
<li>
Section 1C
</li>
<li class="back">
Back
</li>
</ul>
</li>
<li class="section">
Section 2
<ul class="sub-menu" style="z-index: 2;">
<li>
Section 2A
</li>
<li>
Section 2B
</li>
<li>
Section 2C
</li>
<li class="back">
Back
</li>
</ul>
</li>
</ul>
</div>
</div>