I am trying to make a toggle like menu for showing different pieces of information, however my attempt is not working.
What I am looking for is if the user clicks on any of the titles (A, B or C) the description will fadeIn. That is why I tried using the closest() method to get the description associated with the title. Then when the user clicks on a different title, for the current one to close and the other open.
Does anyone see what I am doing wrong?
$(".service-list-title").on("click", function(event) {
$(this).closest('.service-list-description').fadeIn(300).siblings().closest('.service-list-description').fadeOut(300);
});
.service-list-title {
display: block;
color: #333333;
font-size: 1.1rem;
letter-spacing: .1rem;
margin: 20px 0px;
padding: 0 10px 0 25px;
cursor: pointer;
transition: all .35s ease;
-webkit-transition: all .35s ease;
}
.service-list-description {
display: none;
color: #333333;
font-size: .9rem;
margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service-list">
<li class="service-list-title">A</li>
<p class="service-list-description">This is the content for A</p>
</div>
<div class="service-list">
<li class="service-list-title">B</li>
<p class="service-list-description">This is the content for B</p>
</div>
<div class="service-list">
<li class="service-list-title">C</li>
<p class="service-list-description">This is the content for C</p>
</div>
The issue with your code is that you're using closest(), which looks for parent elements, instead of next() or siblings() which searches for elements at the same level.
However you can make the logic much simpler by attaching the event handler to the .service-list element and using find() to get the required element to fadeToggle(). You can then select all the other .service-list-description elements and call fadeOut() to hide them. Try this:
$(".service-list").on("click", function(event) {
var $target = $(this).find('.service-list-description').fadeToggle(300);
$('.service-list-description').not($target).fadeOut(300);
});
.service-list-title {
display: block;
color: #333333;
font-size: 1.1rem;
letter-spacing: .1rem;
margin: 20px 0px;
padding: 0 10px 0 25px;
cursor: pointer;
transition: all .35s ease;
-webkit-transition: all .35s ease;
}
.service-list-description {
display: none;
color: #333333;
font-size: .9rem;
margin: 10px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service-list">
<li class="service-list-title">A</li>
<p class="service-list-description">This is the content for A</p>
</div>
<div class="service-list">
<li class="service-list-title">B</li>
<p class="service-list-description">This is the content for B</p>
</div>
<div class="service-list">
<li class="service-list-title">C</li>
<p class="service-list-description">This is the content for C</p>
</div>
The function below should do what you ask for:
$(".service-list-title").on("click", function(event) {
$('.service-list-description').fadeOut(300); // Close any that's open
$(this).siblings('.service-list-description').fadeIn(300); // Open new
});
Fiddle: https://jsfiddle.net/beekvang/oro9ue3k/
Related
I'm creating a table of links, I want the table to be a bit fancier by changing the table heading's background color whenever I move the cursor to one of the list's links. However, I don't know how to change the attribute of the container element by affecting its smaller element. This is my code:
<html lang="vi">
<head>
<style>
.toc-container {
max-width: 600px;
font-family: "Roboto", sans-serif;
background: #deff9d;
border-radius: 8px;
box-shadow: 0 4px 11px rgba(0, 0, 0, 0.6);
}
.toc-container h2.index-heading {
text-transform: uppercase;
font-weight: normal;
margin: 0 16px;
padding-top: 16px;
}
.table-of-contents {
list-style: none;
padding: 0;
}
.table-of-contents li.author li.blog {
background: #222;
transition: 400ms;
list-style: none;
}
.table-of-contents li.author{
background-color: green;
}
.table-of-contents li.author li:nth-of-type(even).blog {
background: #2e2e2e;
}
.table-of-contents li.author li:hover.blog {
background: #000;
}
.table-of-contents li a {
text-decoration: none;
color: #fff;
margin-left: 24px;
padding: 16px 0;
display: block;
}
</style>
</head>
<body>
<div class="toc-container">
<h2 class="index-heading">heading</h2>
<ul class="table-of-contents">
<li class="author">
Author's name
<ul>
<li class="blog">
Nháp 1
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I think it's easier to do this with javascript, you can use Element Event mouseenter and mouseleave to achieve style change, maybe this can help you. code below
<script>
const headerDiv = document.querySelector('.index-heading');
const blogDiv = document.querySelector('.blog');
blogDiv.addEventListener('mouseenter', function(e) {
headerDiv.style.background = 'purple'
})
blogDiv.addEventListener('mouseleave', function(e) {
headerDiv.style.background = '#deff9d'
})
</script>
basically your HTML code is not in a order manner so that we could not apply all the changes you need . thats why i attached the code snippet which is easily explained and you can change your design yourself as your choice . and in style , unfortunately a tag is not doing as expected but i am sure that it will work in your browser .
if any needs to be changed in my code then comment below .
let header2=document.getElementById("header2");
let link=document.getElementById("link")
let changeLink=()=>{
header2.style.backgroundColor="green"
link.style.backgroundColor="yellow"
}
let changeHeader=()=>{
link.style.background="green"
header2.style.backgroundColor="yellow"
}
a{
text-decoration: none;
}
#header1{
height:85px;
}
#link{
margin-left: 50px;
background-color:black;
margin-top:-141px;
}
#header2{
height:180px;
}
<div id="header1" style="background-color:red">header1</div>
<a href="https://www.blogger.com/profile/00965819760488730111">
<div style="background-color:green" id="change">
<div id="header2" onmouseover="changeLink()">Đặng Minh Hoàng</div>
</div>
</a>
<ul id="link" onmouseover="changeHeader()">
<div class="col my-1">Nháp1</div>
<div class="col my-1">Nháp2</div>
<div class="col my-1">Nháp3</div>
<div class="col my-1">Nháp4</div>
<div class="col my-1">Nháp5</div>
</ul>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
In the demo below, there are two columns with list items and when I click on the #6 li in the column #2, the #5 li jumps to the column #1. Is there a way to make sure all 3 lists to STAY in the column #2 when clicked?
$(function() {
// (Optional) Active an item if it has the class "is-active"
$(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown();
$(".accordion > .accordion-item").click(function() {
// Cancel the siblings
$(this).siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp();
// Toggle the item
$(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
});
});
ul {
display: flex;
flex-flow: wrap column;
height: 200px; /*to change height to split ul list*/
border: solid 1px red;
}
.accordion {
list-style: none;
}
.accordion-thumb {
margin: 0;
padding: 5px;
cursor: pointer;
font-weight: normal;
}
.accordion-thumb::before {
content: "";
display: inline-block;
height: 7px;
width: 7px;
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}
.accordion-panel {
margin: -10px;
display: none;
margin-left: 12px;
padding-bottom: 15px;
}
body {
line-height: 1.5;
margin: 0 auto;
max-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
<li class="accordion-item is-active">
<h3 class="accordion-thumb">1.) list one</h3>
<p class="accordion-panel">1111111111
</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">2.) list two</h3>
<p class="accordion-panel">2222222222 </p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">3.) list three</h3>
<p class="accordion-panel">3333333333
</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">4.) list four </h3>
<p class="accordion-panel">4444444444 </p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">5.) list five</h3>
<p class="accordion-panel">5555555555
</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">6.) list six</h3>
<p class="accordion-panel">6666666666 </p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">7.) list seven</h3>
<p class="accordion-panel">7777777777
</p>
</li>
</ul>
this is a sollution using Column-count in the css
demo
It does solve your problem in a different way
i've changed this from your example code
added a <li> between the fourth and fifth <li>
<li class="column-break"> </li>
changed the css of the UL to:
ul {
height: 200px;
border: solid 1px red;
column-count: 2;
}
added css for the <li> with the class "column-break"
.column-break {
break-after: column;
}
one ¿hacky? sollution is to change the height of the ul to 180px
The columns are created when the line items can no longer to fit within the confined height (200px). Once the column reaches enough items to fill up 200px, the next li is wrapped to the next column. When you click on the sixth li, it minimizes the 5th item. Those items are 38px high so five of them can easily fit into the first column (38 * 5 = 190) and thus the 5th item is wrapped into the first column.
Given the example and what you are trying to accomplish, you can either reduce the height of ul to 180px and it will keep the three items in the second row. OR you can add top or bottom padding or margin or a fixed/min-height to the li.
Updated after a comment.
Using Flexbox I see 1 way, by using one of the pseudo as a divider.
With the pseudo, it is positioned after the 4th item by simply give the first 4 òrder: -1. Then we give it 100% height, and as such it will force itself in a column of its own.
Furthermore, to avoid column wraps between the first 4 and last 3, the parent container must be high enough to accommodate all items in each column, plus either one's content (which, when using accordion, the container generally always is).
Stack snippet - Pseudo divider
$(function() {
// (Optional) Active an item if it has the class "is-active"
$(".accordion > .accordion-item.is-active").children(".accordion-panel").slideDown();
$(".accordion > .accordion-item").click(function() {
// Cancel the siblings
$(this).siblings(".accordion-item").removeClass("is-active").children(".accordion-panel").slideUp();
// Toggle the item
$(this).toggleClass("is-active").children(".accordion-panel").slideToggle("ease-out");
});
});
ul {
display: flex;
flex-flow: wrap column;
height: 250px; /*to change height to split ul list*/
border: solid 1px red;
}
.accordion {
list-style: none;
}
.accordion::before {
content: '';
height: 100%;
width: 0;
}
.accordion-item:nth-child(-n+4) {
order: -1;
}
.accordion-thumb {
margin: 0;
padding: 5px;
cursor: pointer;
font-weight: normal;
}
.accordion-thumb::before {
content: "";
display: inline-block;
height: 7px;
width: 7px;
-webkit-transition: -webkit-transform 0.2s ease-out;
transition: -webkit-transform 0.2s ease-out;
transition: transform 0.2s ease-out;
transition: transform 0.2s ease-out, -webkit-transform 0.2s ease-out;
}
.accordion-panel {
margin: -10px;
display: none;
margin-left: 12px;
padding-bottom: 15px;
}
body {
line-height: 1.5;
margin: 0 auto;
max-width: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
<li class="accordion-item is-active">
<h3 class="accordion-thumb">1.) list one</h3>
<p class="accordion-panel">1111111111<br>3333333333<br>3333333333
</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">2.) list two</h3>
<p class="accordion-panel">2222222222<br>3333333333<br>3333333333 </p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">3.) list three</h3>
<p class="accordion-panel">3333333333<br>3333333333<br>3333333333
</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">4.) list four </h3>
<p class="accordion-panel">4444444444<br>3333333333<br>3333333333 </p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">5.) list five</h3>
<p class="accordion-panel">5555555555<br>3333333333<br>3333333333
</p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">6.) list six</h3>
<p class="accordion-panel">6666666666<br>3333333333<br>3333333333 </p>
</li>
<li class="accordion-item">
<h3 class="accordion-thumb">7.) list seven</h3>
<p class="accordion-panel">7777777777<br>3333333333<br>3333333333
</p>
</li>
</ul>
This question already has answers here:
jQuery click toggle animation
(2 answers)
Closed 5 years ago.
i'm trying to animate an element with css.
First this element is hidden. A javascript event will show it and i want it to be animated.
The expected animation is letter-spacing -2px to letter-spacing 3px
$('#btn').click(function() {
$('#wrapper').addClass('animate');
});
#wrapper {
display: none;
/* I dont want the wrapper to be visible before the event */
}
#wrapper .message {
display: none; /* the message is not visible before the event */
letter-spacing: -2px;
transition: all 3s;
}
#wrapper.animate .message {
display: block;
letter-spacing: 3px;
}
#wrapper.animate {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<div id="wrapper" class="col-sm-12 no-padding">
<div class="text-center font-size-20">
<span class="message">
Message to show and animate
</span>
</div>
</div>
<button id="btn">Click me to animate</button>
Thanks
I found the real issue:
When using a unique class to show AND change the property to animate, the browser will directly show the element with the new property (letter-spacing 3px).
To make it work, I can add a timeout.
I'm still waiting for a better solution if it exists
$('#btn').click(function() {
$('#wrapper').addClass('show');
window.setTimeout(function() {
$('.message').addClass('animate');
}, 500);
});
#wrapper {
display: none;
/* I dont want the wrapper to be visible before the event */
}
#wrapper .message {
display: none; /* the message is not visible before the event */
letter-spacing: -2px;
transition: all 3s;
}
#wrapper.show .message {
display: block;
}
#wrapper .message.animate {
letter-spacing: 3px;
}
#wrapper.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<div id="wrapper" class="col-sm-12 no-padding">
<div class="text-center font-size-20">
<span class="message">
Message to show and animate
</span>
</div>
</div>
<button id="btn">Click me to animate</button>
Have you tried to change the css value of display instead of add a class ?
$('#btn').click(function() {
$('#wrapper').css('display', 'block);
});
And look at this : https://www.w3schools.com/cssref/pr_class_visibility.asp
visibility property can help you.
Here you go with the solution https://jsfiddle.net/5h1dgfpu/
$('#btn').click(function() {
$('#wrapper').addClass('animate');
});
#wrapper .message {
display: block; /* the message is not visible before the event */
letter-spacing: -2px;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
#wrapper.animate .message {
display: block;
letter-spacing: 3px;
visibility: visible;
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="col-sm-12 no-padding">
<div class="text-center font-size-20">
<span class="message">
Message to show and animate
</span>
</div>
</div>
<button id="btn">Click me to animate</button>
You can move the item using margin in the css, and for delay, you can use setTimeOut function in javascript, like below
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="col-sm-12 no-padding">
<div class="text-center font-size-20">
<span class="message">
Message to show and animate
</span>
</div>
</div>
<button id="btn">Click me to animate</button>
CSS
#wrapper .message {
display: none; /* the message is not visible before the event */
transition:all 300ms ease-in-out;
margin-left:0px;
}
#wrapper.animate .message {
display: block;
letter-spacing: 3px;
visibility: visible;
margin-left:30px;
}
JAVA-SCRIPT
$('#btn').click(function() {
$('#wrapper span').show();
setTimeout(function() {
$('#wrapper').addClass('animate');
}, 1000);
});
Here is a fiddle for you
$(document).ready(function(){
$("#click").click(function(){
$("#text").css("visibility","visible");
$("#text").animate({
opacity: '1'
});
});
});
#text{
font-family: monospace;
font-size: 25px;
display: block;
visibility: hidden;
opacity: 0.2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<p id="text"> Message to show and animate</p>
</div>
<button id="click">Click & Animate</button>
i have no idea why this is happening.
I replicated a accordion with html, css and jquery, i followed this guide and i adapted it to my website
"http://demos.inspirationalpixels.com/Accordion-with-HTML-CSS-&-jQuery/"
My jquery is the same, my html and css is a bit different because i customized it, but its basicly the same.
HTML:
<div class="plan-container" style="flex: 0 0 25%;">
<div class="plan-header-mec">
<h2 style="color: #fff; font-weight: lighter; margin: 0; padding-top: 0.625em;">Blabla</h2>
</div>
<div class="plan-details">
<div class="accordion">
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-1">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-1" class="accordion-section-content">
<p>Information.</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-2">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-2" class="accordion-section-content">
<p>Information</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-3">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-3" class="accordion-section-content">
<p>Information</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-4">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-4" class="accordion-section-content">
<p>Information</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
<div class="accordion-section">
<a class="accordion-section-title" href="#accordion-5">
<li class="fa fa-check">Title</li>
</a>
<div id="accordion-5" class="accordion-section-content">
<p>Information</p>
</div>
<!--end .accordion-section-content-->
</div>
<!--end .accordion-section-->
</div>
<!--end .accordion-->
<p>Conclusion</p>
</div>
</div>
CSS:
#media handheld (min-width: 480px) {
.plan-container {
display: inline-block;
}
}
#media (min-width: 992px) {
.plan-container {
display: table-cell;
}
}
#media (min-width: 1200px) {
.plan-container {
display: table-cell;
}
}
.plan-container {
width: 50%;
overflow: hidden;
border-radius: 5px;
background-color: #fff;
position: relative;
top: 0;
-webkit-transition: all 1s;
transition: all 1s;
}
.plan-container .plan-header-mec {
padding: 50px 0;
border-radius: 5px 5px 0 0;
background-image: url(../img/mv-ber-vantagens-mecanico.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
text-align: center;
}
.plan-container .plan-header p {
margin: 0;
color: #447F71;
}
.plan-container .plan-details {
margin: 0 auto;
padding: 60px;
background: url("http://raventools.com/wp-content/themes/raven-wp-theme-2014/images/plan-bottom-border.png") top center no-repeat;
}
.plan-container .plan-details ul {
padding-left: 0;
list-style: none;
}
.plan-container .plan-details ul li span {
font-weight: lighter;
/*color: #777777;*/
}
.plan-container .plan-details p {
background-color: #f4f4f4;
margin: 2em 0;
padding: 1.25em;
font-size: 0.75em;
line-height: 1.8;
color: #777777;
}
/* Test accordion */
.accordion,
.accordion * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.accordion {
overflow: hidden;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
border-radius: 3px;
background: #f7f7f7;
background-image: url(../img/fibra-carbono.jpg);
}
/*----- Section Titles -----*/
.accordion-section-title {
width: 100%;
padding: 15px;
display: inline-block;
border-bottom: 2px solid #333333;
/*Carbon Fiber Background*/
/*Carbon Fiber Background*/
transition: all linear 0.15s;
/* Type */
font-size: 20px;
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
text-shadow: 0px 1px 0px #1a1a1a;
color: #fff;
}
/*.accordion-section-title.active, .accordion-section-title:hover {
background:#4c4c4c;
}*/
.accordion-section:last-child .accordion-section-title {
border-bottom: none;
}
/*----- Section Content -----*/
.accordion-section-content {
padding: 15px;
display: none;
}
/* Test accordion */
/* Check Mark Color*/
.fa ul {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.fa-check {
display: block;
}
.fa-check::before {
color: #66ff33;
}
/* Check Mark Color*/
And finally my jQuery
/*Accordion*/
$(document).ready(function() {
function close_accordion_section() {
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var currentAttrValue = $(this).attr('href');
if ($(e.target).is('.active')) {
close_accordion_section();
} else {
close_accordion_section();
// Add active class to section title
$(this).addClass('active');
// Open up the hidden content panel
$('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
Ok now, my problem is. What i want is:
When i click Title 1, Information 1 dropdown. (works)
If i click Title 2. while information 1 is showing, information 1 closes and opens information 2 (works)
Now my problem is, if Information 2 is open and i want to close it, when i click on the Title, on the letters of the tittle the dropdown closes and opens again... If i click outside the letters it works properly.
In the jquery
if($(e.target).is('.active')) {
I changed the e.target to .accordion-section-title and what happends is, it opens and closes when i click anywhere, letters or outside the letters, but if a information box is openned and i click on another one, the other one doesn't open, but the opened one closes.
I have no idea what else to do, if you can help, i would apreciate it
Probably your e.target sometimes is the wrong element, infact it depends on where you actually click on.
For instance, if you click on a child element (like the <li> element in your case) the condition $(e.target).is('.active') will fail
Try with this code instead:
$('.accordion-section-title').click(function(e) {
// Grab current anchor value
var target = $(e.target).closest(".accordion-section-title");
var currentAttrValue = $(target).attr('href');
if($(target).is('.active')) {
Not exactly an answer (not yet 50 reputation so I can't comment, sorry), but is there any (good ?) reason to not using JQueryUI accordion ?
If you don't want to use all the jQueryUI (and I can understand) you can "isolate" just the accordion pluggin on the custom download section.
I may be simplest than what you're trying to write imho.
i have some issue i'm new in javascript and can't handle with multilevel nested blocks: I need to open nested block using toogle and mootools. I found some examples like accorodion, but i need toogle effect on nested blocks.
Can you help me?
Thanks.
1) here example that i found on jquery, i need the same but on mootools
$('.nested-accordion').find('.comment').slideUp();
$('.nested-accordion').find('h3').click(function(){
$(this).next('.comment').slideToggle(100);
$(this).toggleClass('selected');
});
* {
margin: 0;
padding: 0;
line-height: 1.5;
font-size: 1em;
font-family: Calibri, Arial, sans-serif;
}
.container {
margin: 0 auto;
width: 80%;
}
.nested-accordion {
margin-top: 0.5em;
cursor: pointer;
}
.nested-accordion h3 {
padding: 0 0.5em;
}
.nested-accordion .comment {
line-height: 1.5;
padding: 0.5em;
}
.nested-accordion h3 {
color: #47a3da;
}
.nested-accordion h3:before {
content: "+";
padding-right: 0.25em;
color: #becbd2;
font-size: 1.5em;
font-weight: 500;
font-family: "Lucida Console", Monaco, monospace;
position: relative;
right: 0;
}
.nested-accordion h3.selected {
background: #47a3da;
color: #fff;
}
.nested-accordion h3.selected:before {
content: "-";
}
.nested-accordion .comment {
color: #768e9d;
border: 0.063em solid #47a3da;
border-top: none;
}
.nested-accordion a {
text-decoration: none;
color: #47a3da;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>
This is a comment
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>
This is a another content which is really long and pointless but keeps on going and it technically a run-on sentence but here is a link to google to distract you -> <a href='http://google.com' target='_blank'>link</a>
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>This is a another content</div>
</div>
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>This is a another content</div>
</div>
</div>
</div>
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>This is a another content</div>
</div>
</div>
</div>
<div class='nested-accordion'>
<h3>Heading</h3>
<div class='comment'>This is a another content</div>
</div>
</div>
One Mootools function I like is Reveal.
This can reveal up/down or left/right.
element.toggle() will snap to the opposite state (if open, will close without animating, etc). Otherwise, element.reveal() or element.dissolve() will open / close.
In your case, you would want something like:
var container = document.getElement('.container');
Array.each(container.getElements('.comment'), function(comment){
comment.set('reveal', {duration: 250}).toggle();
if(comment.getPrevious('h3')){
comment.getPrevious('h3').addEvent('click', function(e){
var comment = e.target.getNext('.comment');
if(comment.getStyle('display')==='block'){
e.target.getNext('.comment').dissolve();
}else{
e.target.getNext('.comment').reveal();
}
});
}
});
I am using Mootools long hand methods here (avoiding dollar) so that you can play nice with other frameworks (like jQuery).
The Mootools docs are pretty good, but may take some trial and error ;)
Mootools Reveal
Here is an example with your HTML / CSS:
JSFiddle Example
I hope this helps!