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!
Related
My assignment is to show and hide a <div> using DOM. There are multiple h2 but only one has an id and I am not allowed to add id's or classes. How can I make only one div show and hide. The id for the h2 with the div I need to show is info.
Here is a snippet of my code:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
margin: 20px;
padding: 10px;
}
section {
margin-bottom: 50px;
}
footer p {
border-top: 1px solid #000;
padding: 10px;
}
#info div:first-of-type {
display: none;
}
#info div.more {
display: block;
}
#info h2 {
cursor: pointer;
}
<body>
<section>
<figure>
<img s src="https://media.swansonvitamins.com/images/items/250/JR187.png" alt="Photo of Curcumin 95">
</figure>
<ul>
<li>Curcumin 95 protects against oxidative damage</li>
<li>Delivers 95% curcuminoids</li>
</ul>
</section>
<section id="info">
<h2>Show More...</h2>
<div>
<p>Other Ingredients: Cellulose, magnesium stearate (vegetable source) and silicon dioxide. Capsule consists of hydroxypropylmethylcellulose.
</p>
<p>Usage: Take 1 capsule per day with food or as directed by your qualified healthcare professional</p>
<p>Note: ...</p>
</div>
<h2>Our Guarantee</h2>
<div>
<p>Our lab evaluates...</p>
</div>
var h2List = document.querySelectorAll('#info h2')
h2List.forEach(h2 => {
h2.addEventListener('click', () => h2.nextSibling.classList.toggle('more'))
})
I think this is you want
I think...u have to make onclick event in h2 tag... then include script code
$(this).css('display' , 'block')
I am wanting to display a div .before() another if it does not contain a specific class within it. Though it seems simple enough, somehow I am not able to get it working...
Here's a snippet of the progress I've made so far:
$('.container > #content').not('.entry', function() {
$(this).before('<div class="noentry">No entries to display.</div>');
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
}
.container {
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Section With an Entry:</h1>
<div id="content">
<div class="entry">This is an entry.</div>
</div>
</div>
<div class="container">
<h1>Section Without an Entry:</h1>
<div id="content"></div>
</div>
The .not() method does not work as you are expecting. It only checks the immediate object for the .entry class. You need to search descendants. See the updated example below, you can use a .find().
Also, as noted in the comments above, you shouldn't duplicate ids, so I changed your content to a class.
$(function() {
$('.container > .content').each(function() {
if (!$(this).find(".entry").length) {
$(this).before('<div class="noentry">No entries to display.</div>');
}
});
});
body {
font-size: 16px;
margin: 0;
padding: 0;
border: 0;
}
h1 {
font-size: 22px;
margin-top: 0;
}
.container {
margin: 0 auto;
max-width: 300px;
border: 1px solid lightgrey;
padding: 10px;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1>Section With an Entry:</h1>
<div class="content">
<div class="entry">This is an entry.</div>
</div>
</div>
<div class="container">
<h1>Section Without an Entry:</h1>
<div class="content"></div>
</div>
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 would like to create links to content that is hidden by a show/hide java script. There are three divs within each hidden content with videos and text to which I would like create links; e.g., create a link to the "example" div shown in the code below. It doesn't have to be linked directly to each div. Creating a link destination above the div would be even better. I hope my question makes sense.
The code I am using for the show/hide works perfectly. This is a generic version of that code:
HTML
<p>***Visible content***
<a href="#" id="example-show" class="showLink"
onclick="showHide('example');return false;">See more.</a>
</p>
<div id="example" class="more">
<p>***Hidden content***</p>
<p><a href="#" id="example-hide" class="hideLink"
onclick="showHide('example');return false;">Hide this content.</a></p>
CSS
.more {
display: none;
border-top: 1px solid #666;
border-bottom: 1px solid #666;
}
a.showLink, a.hideLink
{
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url('down.gif') no-repeat left;
}
a.hideLink {
background: transparent url('up.gif') no-repeat left;
}
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f;
}
JavaScript
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
Hoping that I understand your question. Study the example below
HTML
$(document).ready(function() {
$('li').click(function () {
$('.content:visible').hide(); // hides the visible content before
$('.content').eq($(this).index()).show(); // shows the corresponding content
});
});
li {
display: inline;
text-transform: uppercase;
font-family: calibri;
height: 24px;
}
.content {
font-size: 60px;
color: red;
}
.content:not(:first-of-type) {
display: none; /* Hides all but the first .content div */
}
li a {
padding: 0 15px 0 15px;
text-decoration: none;
line-height: 24px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li> One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<div class="content"> Content One</div>
<div class="content"> Content Two</div>
<div class="content"> Content Three</div>
<div class="content"> Content Four</div>
Note: Had to put this together to help you understand how you can achieve what you want, so you have to make necessary changes to get it to work for you.
I have a simple tooltip which has long JavaScript code in the divs.
I would to make it is as simple way
could any one help please
here is my code
<div onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" style="position:relative;">Tool
<div id="tt1DX1" class="toolTip_new pbc11_ttpos1_1Q_di" style="display: none;">
<div class="tool_wrapper">
<div class="tooltip_top_new"></div>
<div class="tooltip_middle_new">
<div class="content">
<p>Please holder actuall text</p>
<p>Please holder actuall text</p>
</div>
</div>
<div class="tooltip_bot_new2"></div>
</div>
</div>
</div>
css
.tooltip_top_new{
background:url(../images/n_tooltip_top.png) no-repeat;
height:9px;
width:212px;
}
.tooltip_middle_new{
background:url(../images/n_tooltip_middle.png) no-repeat;
width:212px;
}
.tooltip_middle_new .content{
padding:2px 13px 1px;
}
.tooltip_middle_new .content p{
line-height: 1.3;
margin-bottom: 1em;
text-align: left;
}
.tooltip_bot_new2{
background:url(../images/n_tooltip_bot2.png) no-repeat;
height:21px;
width:212px;
}
.Question_di{
position:relative;
}
.pbc11_ttpos1_1Q_di {
border: 0 solid #FF0000;
}
.toolTip_new {
background: none repeat scroll 0 0 transparent;
color: #5C5C5C;
display: none;
font: 10px/12px Tahoma,Geneva,sans-serif;
left: -173px;
top: -90px;
position: absolute;
z-index: 1000;
}
the thing is that I have to copy & paste onmouseover="document.getElementById('tt1DX1').style.display='block'" onmouseout="document.getElementById('tt1DX1').style.display='none'" where ever using the tooltips,I would like to avoid it.
JQueryTools includes a Tooltip module which will get rid of a big chunk of your code.
http://jquerytools.org/demos/tooltip/index.html
It's also possible to create tooltips with no JavaScript at all, using HTML and CSS along these lines:
<div class="has-tooltip">
<button class="huge red">You Know You Wanna...</button>
<div class="tooltip">Do NOT Press This Button.</div>
</div>
And in CSS:
.has-tooltip .tooltip {
position: absolute;
display: none;
<style code to position (with margin-left and margin-top)
and make the tooltip box look how you want>
}
.has-tooltip:hover .tooltip {
display: block;
}
Google "CSS Tooltips" to see lots of examples.