Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
How do i add a transition effect on this expanding list?
<div class="container">
<div class="outerBG">
<div class="innerBG">
<h2 class="info">➤ Show text</h2>
<ul id="infoContent" style="display:none">
<li>TEST 1 TEST 1 TEST 1 TEST 1</li>
<li>TEST 2 TEST 2 TEST 2 TEST 2</li>
</ul>
</div>
</div>
</div>
I'm using JavaScript to toggle the UL's display:
function expand () {
infoContent.style.display = infoContent.style.display === 'none' ? '' : 'none';
}
Is it possible to make a transition effect out of this?
jsfiddle: https://jsfiddle.net/mqy2c80u/
You cannot use display: none to animate elements into view.
However, you can update your expand function to the change the class from open to close like so:
JavaScript Change:
function expand () {
infoContent.className = infoContent.className === 'open' ? 'close' : 'open';
}
And then apply the CSS animation using max-height (in case the content inside the animated div is dynamic):
CSS Addition:
#infoContent {
margin: 0; // Remove the margins
overflow: hidden;
}
#infoContent.close {
max-height: 0; // Set max height to zero
transition: max-height 0.3s ease;
}
#infoContent.open {
max-height: 300px; /* Set max height as big as you think it will ever go */
transition: max-height 0.3s ease;
}
Demo: JSFiddle
This can be solved using CSS only, no Javascript required here.
https://jsfiddle.net/mqy2c80u/10/
.container {
height: 300px;
}
.innerBG {
width: 260px;
margin: 0 auto;
}
.outerBG {
width: 260px;
background-color: #4f322a;
margin: 15px auto 25px auto;
border-radius: 15px;
}
.container {
width: 100%;
background-color: #70463a;
}
.info {
color: white;
cursor: pointer;
}
.info h2 {
display: inline-block;
}
.info h2:after {
content:"Show content";
}
#demo {
display: none;
}
#demo:checked ~ #infoContent {
max-height: 400px;
}
#demo:checked + .info h2:after {
content:"Hide content";
}
.innerBG h2 {
font-size: 20px;
font-family: lato;
color: #ffffff;
font-weight: 100;
}
#infoContent {
transition-duration: 0.4s;
max-height: 0;
overflow: hidden;
}
#infoContent li {
font-size: 20px;
font-family: lato;
color: #ffffff;
font-weight: 100;
}
<div class="container">
<div class="outerBG">
<div class="innerBG">
<input type="checkbox" id="demo" />
<label class="info" for="demo">➤
<h2></h2>
</label>
<ul id="infoContent">
<li>TEST 1 TEST 1 TEST 1 TEST 1</li>
<li>TEST 2 TEST 2 TEST 2 TEST 2</li>
</ul>
</div>
</div>
</div>
You want to add a transition to max-height and toggle that and not display. The reason being that display is not an ordinal value so cannot be animated as transitional values cannot be interpolated. max-height is ordinal, so can be transitioned.
With that in mind, it is important to note that the 'show' value for max-height should be enough to accommodate the content, otherwise the transition will elongate. Its also better than animating on height as a known value is not required, the height will only grow to that required.
var infoContent = document.getElementById("infoContent");
var info = document.querySelector(".info");
function expand() { // do this on maxHeight not display
infoContent.style.maxHeight = infoContent.style.maxHeight ? 0 : '100px';
}
info.addEventListener("click", expand, false);
.innerBG {
width: 260px;
margin: 0 auto 0 auto;
overflow: auto;
}
.outerBG {
width: 260px;
background-color: #4f322a;
margin: 15px auto 25px auto;
border-radius: 15px;
overflow: auto;
}
.container {
width: 100%;
background-color: #70463a;
overflow: auto;
}
.innerBG h2 {
font-size: 20px;
font-family: lato;
color: #ffffff;
font-weight: 100;
}
#infoContent li {
font-size: 20px;
font-family: lato;
color: #ffffff;
font-weight: 100;
}
#infoContent {
max-height: 0; /* collapse by default */
overflow: hidden; /* <-- hide content when collapsed */
transition: max-height 200ms; /* <-- animate on change */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="outerBG">
<div class="innerBG">
<h2 class="info">➤ Show text</h2>
<ul id="infoContent">
<li>TEST 1 TEST 1 TEST 1 TEST 1</li>
<li>TEST 2 TEST 2 TEST 2 TEST 2</li>
</ul>
</div>
</div>
</div>
Related
On the website down below, when I close the side menu in mobile, I can see the body of the menu close faster than the texts and search icon. Why did this happen? Why they don't close together?
I used the Divi plugin on WordPress but I think there isn't any conflict.
It opens and closes smoothly and well on the desktop.
https://wordpress-602494-1949747.cloudwaysapps.com/
<script>
let isMenuOpen = false;
const menuHandler = document.querySelector('.menu_left_handler');
const menuTitle = document.querySelector('.menu_left_title');
const menuRight = document.querySelector('.menu_right');
menuHandler.addEventListener('click', () => {
isMenuOpen ? menuRight.classList.remove('menu_right__open') : menuRight.classList.add('menu_right__open');
isMenuOpen = !isMenuOpen;
menuHandler.innerText === '☰' ? (menuHandler.innerText = '✕') : (menuHandler.innerText = '☰');
menuTitle.innerText === 'MENY' ? (menuTitle.innerText = 'STÄNG') : (menuTitle.innerText = 'MENY');
});
let x = window.matchMedia("(max-width: 768px)")
function mediaQ(x) {
if (x.matches) {
menuHandler.addEventListener('click', () => {
let mobileMenu = document.getElementById("menuId")
mobileMenu.classList.toggle("menu_right__open");
});
}
}
#menuId {
background: #171717;
border-radius: 0 1rem 1rem 0;
padding: 1rem;
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
align-content: stretch;
color: #fff;
font-family: 'museo-sans', sans-serif !important;
height: 30rem;
}
.menu {
height: 25rem;
}
#menu a {
color: #fff;
}
.menu_right {
max-width: 0;
overflow: hidden;
transition: max-width 0.3s;
}
.menu_right__open {
max-width: 100rem !important;
height: 25rem;
transition: max-width 2s;
}
.menu_right ul {
list-style: none;
width: 20rem;
padding-top: 5rem;
padding-left: 2rem;
line-height: 35px;
}
.menu_right ul a {
display: block;
text-decoration: none;
margin: 1rem 0;
font-size: 20px;
}
.menu_right ul a:hover {
color: #F7B660 ;
}
.menu_left {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
align-content: center;
font-size: 20px;
}
.menu_left_title {
font-family: 'museo-sans', sans-serif !important;
font-size: 20px;
writing-mode: tb-rl;
transform: rotate(-180deg);
margin-top: 1rem;
padding: 0.3rem;
}
.menu_left_handler {
padding: 0.5rem;
cursor: pointer;
font-size: 35px;
}
#media screen and (max-width: 768px) {
#menuId {
height: 5rem;
}
.menu {
height: 5rem;
}
.menu_left_title {
display: none;
}
.menu_right__open {
height: 26rem !important;
overflow-y: none !important;
border-radius: 2px;
transition: max-width 4s;
}
.menu_right {
transition: max-width 0.3s;
}
.menu_right ul a {
}
.menu_left_handler {
padding: 0.5rem;
cursor: pointer;
font-size: 18px;
}
}
<body>
<div id="menuId" class="menu">
<div class="menu_left">
<div class="menu_left_handler">☰</div>
<div class="menu_left_title">MENY</div>
</div>
<div class="menu_right">
<div class="et_pb_with_border et_pb_module et_pb_search et_pb_search_0_tb_header et_pb_text_align_left et_pb_bg_layout_light et_pb_hide_search_button">
<form role="search" method="get" class="et_pb_searchform" action="https://wordpress-602494-1949747.cloudwaysapps.com/">
<div>
<label class="screen-reader-text" for="s">Search for:</label>
<input type="text" name="s" placeholder="" class="et_pb_s">
<input type="hidden" name="et_pb_searchform_submit" value="et_search_proccess">
<input type="hidden" name="et_pb_include_posts" value="yes">
<input type="hidden" name="et_pb_include_pages" value="yes">
<input type="submit" value="Search" class="et_pb_searchsubmit" style="">
</div>
</form>
</div>
<nav>
<ul><strong>
<li>Robotlösningar</li>
<li>Made by Andon</li>
<li>Eftermarknad</li>
<li>Kontakt</li>
<li>Om Andon Robotics</li>
</strong>
</ul>
</nav>
</div>
</div>
</body>
This will because you are not transitioning the height when you are closing the div causing it to snap closed, as you are just transitioning the max-width this will cause the width the issue you are facing.
Firstly i would add your transition to your div with the ID of menuID rather than the actual class you are adding on click. Play around with it but you need to transition the height as well as the width otherwise the height is just going to snap. Maybe look into doing your transitions something like this. The example im giving you isnt a 100% fix but it is going to point you in the direction you need to go in order to understand your issue
transition:max-width 0.4s, height 0.4s;
as #Stevo stated below this, that is mainly the problem. However, if you intend to animate the whole menu altogether as its expanding smoothly and consistently from one point of origin I'd suggest you either use transform:scale(); to animate its growth, or you translate the whole panel from top-left to bottom-right fading the content as it comes into the viewport.
The problem with this:
transition:max-width 0.4s, height 0.4s;
Is that you are only stating the time or the animation to run but your width and height are different. Therefore it will not expand consistently.
Also, do not try to make it expand synchronously by editing the time values because it is 1) a terrible approach, and 2) all works fine until you add something to the menu and the height changes.
I'm making a collapsible panel and the issue is with the [data-panel] not keeping the css transition when it's set to height: 100%. it works fine for fixed height i.e. height: 150px , but it's important to keep height dynamic since I don't know the available space of the content inside. i'd prefer not modifying the html or js but i'm open to suggestions...
Codepen: issue on line 44 in css
https://codepen.io/oneezy/pen/bGBpXaW
function activeLinks() {
document.addEventListener('click', e => {
let linkEl = e.target.closest('[data-link]');
if (linkEl) {
let url = linkEl.dataset.link;
let linkEls = document.querySelectorAll('[data-link]');
let ActivelinkEls = document.querySelectorAll(`[data-link="${url}"]`);
// remove "active" class from all links
Array.from(linkEls).forEach( (el) => {
el.classList.remove('active');
});
// add "active" class to all matching links
Array.from(ActivelinkEls).forEach( (el) => {
let prevLink = el.parentElement.previousElementSibling;
let prevPrevLink = el.parentElement.parentElement.previousElementSibling;
el.classList.add('active');
if (prevLink && prevLink.dataset.link) {
prevLink.classList.add('active');
prevLink.parentElement.classList.add('active');
}
if (prevPrevLink && prevPrevLink.dataset.link) {
prevPrevLink.classList.add('active');
prevPrevLink.parentElement.classList.add('active');
}
});
}
});
}
activeLinks();
/* Reset
*********************************/
* { margin: 0; padding: 0; box-sizing: border-box; font-family: roboto; }
html, body { height: 100%; overflow-x: hidden; }
a { text-decoration: none; display: block; }
/* Layout
*********************************/
#page { display: grid; grid-template-columns: 160px 1fr; gap: 3rem; height: 100%; }
#nav { background: black; display: block; align-items: start; align-content: start; justify-content: stretch; padding: 2rem 1rem; }
#main { display: flex; justify-content: space-around; padding: 2rem 5rem 0 0; }
/* Navigation
*********************************/
/* Sections */
#nav .link-level__one { margin: 1rem 0; }
#nav .link-level__two { }
#nav .link-level__three { position: relative; }
#nav .link-level__three::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; width: 100%; background: gray; }
/* Links */
#nav .link-level__one a { padding: .25rem .5rem; color: gray; font-weight: 900; }
#nav .link-level__one a.active { color: white; }
#nav .link-level__two a { padding: .25rem .5rem; color: gray; font-weight: normal; }
#nav .link-level__two a.active { color: white; }
#nav .link-level__three a { padding: .25rem .5rem; color: gray; }
#nav .link-level__three a.active { color: white; font-weight: normal; }
/* Main
*********************************/
#main section { }
#main a { color: black; padding: 1rem .5rem; }
#main a.active { background: blue; color: white; }
/* Panel
*********************************/
[data-panel] { height: 0; overflow: hidden; transition: .22s .22s ease-in-out; }
.active ~ [data-panel] { height: 150px; } /* I NEED THIS TO BE DYNAMIC HEIGHT! */
<div id="page">
<nav id="nav">
<!-- LINK 1
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
<!-- LEVEL 1 -->
<section class="navigation-links__wrapper link-level__one">
Link 1
<!-- LEVEL 2 -->
<section class="link-level__two" data-panel>
Link 1a
<!-- LEVEL 3 -->
<section class="link-level__three" data-panel>
Link 1a-1
Link 1a-2
Link 1a-3
</section>
</section>
</section>
<!-- LINK 2
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
<!-- LEVEL 1 -->
<section class="navigation-links__wrapper link-level__one">
Link 2
<!-- LEVEL 2 -->
<section class="link-level__two" data-panel>
Link 2a
<!-- LEVEL 3 -->
<section class="link-level__three" data-panel>
Link 2a-1
Link 2a-2
Link 2a-3
</section>
</section>
</section>
<!-- LINK 3
::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::: -->
<!-- LEVEL 1 -->
<section class="navigation-links__wrapper link-level__one">
Link 3
<!-- LEVEL 2 -->
<section class="link-level__two" data-panel>
Link 3a
<!-- LEVEL 3 -->
<section class="link-level__three" data-panel>
Link 3a-1
Link 3a-2
Link 3a-3
</section>
</section>
</section>
</nav>
<main id="main">
<section>
<h2>Link Level 1</h2>
Link 1
Link 2
Link 3
</section>
<section>
<h2>Link Level 2</h2>
Link 1a
Link 2a
Link 3a
</section>
<section>
<h2>Link Level 3</h2>
Link 1a-1
Link 1a-2
Link 1a-3
Link 2a-1
Link 2a-2
Link 2a-3
Link 3a-1
Link 3a-2
Link 3a-3
</section>
</main>
</div>
It's a duplicate question that has been answered here:
How can I transition height: 0; to height: auto; using CSS?
You can use a max-height greater than it will ever be to accomplish this.
#menu #list {
max-height: 0;
transition: max-height 1s ease-out;
overflow: hidden;
background: #d5d5d5;
}
#menu:hover #list {
max-height: 1000px;
transition: max-height 1s ease-in;
}
I've somewhat came up with a solution I'm proud of; however, it's not perfect. The main trick in getting this to work was giving the [data-panel] a line-height: 0 and transitioning it when it becomes active (THE LINE-HEIGHT ONLY). Also you'll need to make sure the contents of the [data-panel] don't have any margin or padding (until the panel becomes active) or it will completely throw off the UI.
https://codepen.io/oneezy/pen/bGBBEmp
/* Panel
*********************************/
[data-panel] {
overflow: hidden;
line-height: 0;
opacity: 0;
pointer-events: none;
transition: line-height .22s ease-in-out;
}
.active + [data-panel] {
line-height: 1.4;
opacity: 1;
pointer-events: auto;
}
I'm answering my own question; however, I'm not accepting it as the chosen answer. I'd love to see more unique solutions added to this thread.
The short answer is that you can't. Height transitions will only work on elements that use a unit based value for their height property.
Here's an article detailing different techniques to achieve the same outcome: https://css-tricks.com/using-css-transitions-auto-dimensions/
$(function() {
$('details').on('mouseover', function() {
$(this).attr('open', true);
}).on('mouseout', function() {
$(this).attr('open', false);
})
});
summary::-webkit-details-marker {
color: #00008B;
font-size: 75%;
margin-right: 2px;
}
summary:focus {
outline-style: none;
}
article > details > summary {
font-size: 14px;
margin-top: 16px;
}
details > p {
margin-left: 24px;
}
details details {
margin-left: 36px;
}
details details summary {
font-size: 14px;
}
.wrapper div {
width: 30%;
height: 150px;
float: left;
}
.wrapper:hover div {
width: 16%;
transition: 0.3s;
}
.wrapper div:hover {
width: 40%;
transition: 0.3s;
}
.wrapper {
width: 100%;
}
.div1
{
width: 16.1%;
height: 150px;
padding: 10px;
border: 2px solid blue;
border-radius: 10px;
background-color: white;
float:left;
overflow-y:auto;
}
<div class="wrapper">
<div class="div1" align="left">
<section>
<article>
<details>
<summary><u>General Link</u></summary>
<p><b>Some text to be visibile on mousover</b></p>
</details>
</article>
<article>
<details>
<summary><u>General Link</u></summary>
<p><b>Some text to be visibile on mousover</b></p>
</details>
</article>
</section>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
I'm using an expanding wrapper. Got the transition delay on that working well.
It's Friday though and my brain is fried and here's what I need help with:
What do I need to add to make the transition time longer on the mouseover and mouseout events for the "General Links" dropdowns? Right now, it's immediate on both.
Here's a pen with the code in action. Everything is working as it should except the transition time on the mouseover and mouseout. That is what I'm hitting a brick wall on.
https://codepen.io/alalien/pen/VwaamLa
I think this achieves the effect you're looking for. The only downside with this animation is that there won't be a delayed fade-out/hide on the element when you mouseout.
b {
animation: visible 1s linear forwards;
}
#keyframes visible {
from {
visibility: hidden;
opacity: 0;
}
to {
visibility: visible;
opacity: 1;
}
}
You could add a transform to slide the text down from the a-tag, but then you will have to play around with absolute positioning and margins on the parent element.
I hope that alleviates your headache. Enjoy your weekend.
I'm trying to select a child element of its parent own (a.k.a firstPanel) in Class Syntax but have no idea how would I do this.
It's easy to refer the each firstPanel in the normal function, and it works perfectly fine like this:
$(function accordian() {
$('.mobileCategory').on('click', function() {
if (!$(this).hasClass('open')) {
$(this).addClass('open');
$(this).siblings('.firstPanel').stop(true, true).animate({
maxHeight: 1000 + 'px'
});
} else if ($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).siblings('.firstPanel').stop(true, true).animate({
maxHeight: null
});
}
})
})
but when I click the element under the Class Syntax, the whole .firstPanel is going to unfold like this:
I know this.list is assuming the entire firstPanel. I just don't know how would I refer the child element of the parents own in the Class Syntax.
Are there any ways to do this?
Full Code:
class Accordian {
constructor($el) {
this.$el = $el;
this.category = this.$el.find('.mobileCategory');
this.list = this.category.siblings();
/* Boolean Flags */
this.flags = {
active: false,
};
}
clicked(e) {
console.log('text')
this.list.css({
maxHeight: 1000 + 'px'
})
}
manange() {
console.log(this.list, 'text');
this.$el.on({['click']: (e) => this.clicked(e)});
}
}
var thatAccordian = new Accordian($('#mobile-menu'));
thatAccordian.manange();
a {
text-decoration: none;
color: white;
}
#mobile-menu {
position: absolute;
z-index: 999;
color: white;
width: 100%;
height: calc(100% - 110px);
top: 110px;
background-color: #202020;
}
.wrapper, li {
display: block;
flex-flow: column;
margin: 1rem;
transition: all 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.wrapper > li > ul {
transition: all 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
display: block;
flex-flow: column;
max-height: 0;
overflow: hidden;
margin: 0 1rem;
}
.wrapper > li > ul > li {
transition: all 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
display: block;
flex-flow: column;
margin: 1rem 0;
font-size: .8rem;
outline-width: 0;
border-width: 0;
border-bottom: 1px solid white;
}
<div id="mobile-menu">
<ul class="wrapper">
<li>
MODELS
<ul class="firstPanel">
<li>URUS</li>
<li>HURACÁN</li>
<li>AVENTADOR</li>
<li>FEW OFF</li>
<li>CONCEPT</li>
<li>AD PERSONAM</li>
<li>OVERVIEW</li>
</ul>
</li>
<li>
BRAND
<ul class="firstPanel">
<li>PEOPLE</li>
<li>HISTORY</li>
<li>MASTERPIECE</li>
<li>DESIGN</li>
<li>INNOVATION & EXCELLENCE</li>
<li>OVERVIEW</li>
</ul>
</li>
<li>
<li>MOTORSPORT</li>
<li>STORE</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Well, according to your comments, I think you might want to revisit your Accordian design. Here are a few pointers:
You say each mobileCategories is an Accordian but, when you create an Accordian object like this: var thatAccordian = new Accordian($('#mobile-menu'));, you are stating a one-to-one relationship between thatAccordian and #mobile-menu, wouldn't you say?
Now take a look at the constructor, when you say this.$el = $el;, this.$el ends up with #mobile-menu, not with one .mobileCatetgory; likewise when you write this.category = this.$el.find('.mobileCategory');, someone might think, by the name category (singular), that category ends up with one .mobileCategory element, but it doesn't. Try console.log-ing it and you'll see how category contains ALL (4 in this snippet) category elements. Finally, the same occurs with this.list = this.category.siblings();; this.list will contain ALL (2 in this snippet) uls inside #mobile-menu which are siblings of a .mobileCategory (which is why two elements are being expanded right now instead of just the one clicked).
So, my advice, check your Accordian again but, for the time being, here's a snippet which does what you actually wanted.
As it is right now, inside your clicked(e) function, you need to use the event arg (e) in order to get the exact element being clicked and then apply whatever style is needed for the animation to it, or its siblings. Also, I recommend adding/removing/toggling CSS classes when possible and creating those classes in the CSS file, instead of editing CSS code from JS.
One last thing, I removed this line height: calc(100% - 110px); in the snippet, otherwise the black background was lost when the list was expanded. Also, run the snippet in full screen mode.
HIH
class Accordian {
constructor($el) {
this.$el = $el;
this.category = this.$el.find('.mobileCategory');
this.list = this.category.siblings();
/* Boolean Flags */
this.flags = {
active: false,
};
}
clicked(e) {
//console.log($(e.target))
$(e.target).siblings('ul').toggleClass('expanded');
/*this.list.css({
maxHeight: 1000 + 'px'
})*/
}
manange() {
//console.log(this.list, 'text');
this.$el.on({['click']: (e) => this.clicked(e)});
}
}
var thatAccordian = new Accordian($('#mobile-menu'));
thatAccordian.manange();
a {
text-decoration: none;
color: white;
}
#mobile-menu {
position: absolute;
z-index: 999;
color: white;
width: 100%;
/*height: calc(100% - 110px);*/
top: 110px;
background-color: #202020;
}
.wrapper, li {
display: block;
flex-flow: column;
margin: 1rem;
transition: all 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.wrapper > li > ul {
transition: all 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
display: block;
flex-flow: column;
max-height: 0;
overflow: hidden;
margin: 0 1rem;
}
.wrapper > li > ul > li {
transition: all 500ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
display: block;
flex-flow: column;
margin: 1rem 0;
font-size: .8rem;
outline-width: 0;
border-width: 0;
border-bottom: 1px solid white;
}
.wrapper > li > ul.expanded{
max-height: 1000px;
}
<div id="mobile-menu">
<ul class="wrapper">
<li>
MODELS
<ul class="firstPanel">
<li>URUS</li>
<li>HURACÁN</li>
<li>AVENTADOR</li>
<li>FEW OFF</li>
<li>CONCEPT</li>
<li>AD PERSONAM</li>
<li>OVERVIEW</li>
</ul>
</li>
<li>
BRAND
<ul class="firstPanel">
<li>PEOPLE</li>
<li>HISTORY</li>
<li>MASTERPIECE</li>
<li>DESIGN</li>
<li>INNOVATION & EXCELLENCE</li>
<li>OVERVIEW</li>
</ul>
</li>
<li>
<li>MOTORSPORT</li>
<li>STORE</li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
All of my elements hide and show correctly using slidetoggle(), EXCEPT for my li:before. I've tried forcing the overflow, visibility, display, etc on the :before and the li, and nothing is helping, it still shows the bullets set using the :before class. What needs to happen to hide these bullets when slidetoggle() is activated/deactivated?
jQuery(document).ready(function($) {
$("#read-more").click(function(){
$(".careers-position").slideToggle(800);
return false;
});
});
ul {
line-height: 2.4em !important;
margin-left: 20px;
padding: 0 0 23px 1em;
}
li {
list-style: none !important;
color: #656565;
}
li:before {
content: "";
background: #9e9e9e;
width: 6px;
height: 6px;
display: block;
position: absolute;
left: 18px;
margin-top: 16px;
border-radius: 20px;
overflow: hidden;
backface-visibility: hidden;
}
.careers-position {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="careers-position">
<h3>Pilot</h3>
Position information will go here.
We are an equal opportunity employer and all qualified applicants will receive consideration for employment.
<strong>Requirements:</strong>
<ul>
<li>Multi Commercial (ATP preferred)</li>
<li>First Class Medical</li>
<li>Passport</li>
<li>90 day currency</li>
<li>Clean FAA record</li>
</ul>
</div>
<div class="careers-read-more">
<a class="quick-btn" id="read-more" href="#">Read More</a>
</div>
Add position relative:
.careers-position {
display: none;
position: relative;
}
Demo
Here look at this fiddle https://jsfiddle.net/wfccp58p/4/
ul { line-height: 2.4em; margin-left: 20px;padding: 0 0 23px 1em;list-style-type: none;}
I removed the li:before and added the list-style-type to the ui. Not sure if you still wanted some of the LI:Before pseudo stuff, but this fixes your issue.