I would like to animate the clicked accordion item to the top of the page. The first click works, but everything after seems to accumulate and makes the accordion slide up and out of view. The correct functionality would be each item scrolling to the exact spot as the previous, in a fixed position from the top of the window. Part of the issue is that I am using a prototype and not sure how to stop the accumulation of clicks each time an instance is created.
var media = window.matchMedia("(max-width: 767px")
var Accordion = function(el, multiple) {
this.el = el || {}
this.multiple = multiple || false
var links = this.el.find('.link')
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el
$this = $(this)
$next = $this.next()
$next.slideToggle()
$this.parent().toggleClass('open')
if(!e.data.multiple) {
$el.find('.content').not($next).slideUp().parent().removeClass('open')
}
if(media.matches) {
$("html, body").animate({
scrollTop: $this.offset().top - 85
}, 900)
}
}
var accordion = new Accordion($('.hollow-accordion-03 #accordion'), false)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="hollow-accordion-03">
<div class="flex-container">
<ul id="accordion">
<li>
<div class="link">
<i class="fa fa-database"></i>
<h3>First List Item</h3>
<div class="state-wrap">
<i class="fa fa-plus"></i>
<i class="fa fa-minus"></i>
</div>
</div>
<div class="content">
<p>This is filler content for the list item. Content in this section will be replaced by copy for your site. This is filler text. Content in this section will be replaced by copy for your site. This is filler text.</p>
</div>
</li>
<li>
<div class="link">
<i class="fa fa-database"></i>
<h3>Second List Item</h3>
<div class="state-wrap">
<i class="fa fa-plus"></i>
<i class="fa fa-minus"></i>
</div>
</div>
<div class="content">
<p>This is filler content for the list item. Content in this section will be replaced by copy for your site. This is filler text. Content in this section will be replaced by copy for your site. This is filler text.</p>
</div>
</li>
<li>
<div class="link">
<i class="fa fa-database"></i>
<h3>Third List Item</h3>
<div class="state-wrap">
<i class="fa fa-plus"></i>
<i class="fa fa-minus"></i>
</div>
</div>
<div class="content">
<p>This is filler content for the list item. Content in this section will be replaced by copy for your site. This is filler text. Content in this section will be replaced by copy for your site. This is filler text.</p>
</div>
</li>
<li>
<div class="link">
<i class="fa fa-database"></i>
<h3>Fourth List Item</h3>
<div class="state-wrap">
<i class="fa fa-plus"></i>
<i class="fa fa-minus"></i>
</div>
</div>
<div class="content">
<p>This is filler content for the list item. Content in this section will be replaced by copy for your site. This is filler text. Content in this section will be replaced by copy for your site. This is filler text.</p>
</div>
</li>
</ul>
</div>
</section>
Related
i have this code and i wanted him to not show anything unless clicking on the div.By default it shows everything listed but i need it to just show things filtered by click. Any ideas?
<section class="our_services_tow">
<div class="container">
<div class="architecture_area services_pages">
<div class="portfolio_filter portfolio_filter_2">
<ul>
<li data-filter=".enc"><i class="fa fa-archive" aria-hidden="true"></i>ENCOMENDAS</li>
<li data-filter=".format"><i class="fa fa-file" aria-hidden="true"></i>FORMATOS FICHEIRO</li>
<li data-filter=".prazos"><i class="fa fa-calendar" aria-hidden="true"></i>PRAZOS</li>
<li data-filter=".entreg"><i class="fa fa-truck" aria-hidden="true"></i>ENTREGAS</li>
<li data-filter=".pag"><i class="fa fa-credit-card" aria-hidden="true"></i>PAGAMENTOS</li>
</ul>
</div>
<div class="portfolio_item portfolio_2">
<div class="grid-sizer-2"></div>
<div class="single_facilities col-sm-7 enc">
<div class="who_we_area">
<div class="subtittle">
<h2>blablabla</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
<div class="single_facilities col-sm-7 format">
<div class="who_we_area">
<div class="subtittle">
<h2>Preferência de formatos de ficheiro.</h2>
</div>
<p>blablabla</p>
<p>blablabla</p>
</div>
</div>
make the div hidden using css so it would load up hidden, make another div to have onclick() event(why div? you can use a button) to call a JavaScript function and display the div that is hidden using that function
i have use ng repeat to show images and i want them to be in inline formate with rest of all other things i have use in div item.
problem is that what ever i do its not showing in inline.
Item have display block property.
here is the simple and finale html file.
<!doctype html>
<html ng-app="countryApp">
<head>
<script
src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.26/angular.min.js">
</script>
<script>
var countryApp = angular.module('countryApp', []);
countryApp.controller('CountryCtrl', function ($scope, $http){
$http.get('countries.json').success(function(data) {
$scope.countries = data;
});
});
</script>
</head>
<body>
<div ng-controller="CountryCtrl" >
<div class="item">
<div ng-repeat="country in countries" class="w3l-movie-gride-agile w3l-movie-gride-agile1 owl-item">
<a href="single.php?myNumber={{country.vid}}" class="hvr-shutter-out-horizontal"><img ng-src="thumbnail/{{country.flagURL}}" title="album-name" class="img-responsive" alt=" ">
<div class="w3l-action-icon"><i class="fa fa-play-circle" aria-hidden="true"></i></div>
</a>
<div class="mid-1 agileits_w3layouts_mid_1_home">
<div class="w3l-movie-text">
<h6>Citizen Soldier</h6>
</div>
<div class="mid-2 agile_mid_2_home">
<p>2016</p>
<div class="block-stars">
<ul class="w3l-ratings">
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star" aria-hidden="true"></i></li>
<li><i class="fa fa-star-half-o" aria-hidden="true"></i></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="ribben">
<p>NEW</p>
</div>
</div>
</div>
</div>
The element you put ng-repeat on is also repeatet. So each iteration is wrapped in a regular <div>. So unless you have some global styling that applies to all <div> elements, it wouldn't inline.
To fix it you basically just have to move the ng-repeat-directive a level down. Like this:
<div class="item">
<div ng-repeat="country in countries"
class="w3l-movie-gride-agile w3l-movie-gride-agile1">
// ... rest of content
</div>
</div>
I reckon that should do it.
so basically I'm trying to reproduce some kind of Trello, and what I'm trying to do, is to create (or clone) an existing div, and insert it before the button. Yes I know, there's a method called ".insertBefore()" but I actually tried, it works... But halfway.
This is how the div should look like
Blocks are disposed in this way, and as I said, what I am trying to do is when I click on the "Add Category button" It clones the div and inserts it before the button.
Nothing difficult I know I know. I actually managed to achieve this, but halfway : It works. But only once.
I looked what's happening in the inspector and I noticed, that everytime I click on "Add Category", the div I just cloned, is actually replaced by the div itself. So I can only add it once, not more.
There is my code :
window.onload = function() {
var board = document.querySelector('#board');
var model = document.querySelectorAll('#model');
//creating the block, didn't use .cloneNode()
var newTask = document.createElement('div');
newTask.className='newTask';
newTask.appendChild(document.createElement('p'));
newTask.querySelector('p').innerHTML = 'New Task';
newTask.appendChild(document.createElement('i'));
newTask.querySelector('i').className = 'fa fa-plus';
var newCategory = document.createElement('div');
newCategory.className = 'category';
newCategory.appendChild(newTask);
/* Look like this :
* <div class="category">
* <div class="newTask">
* <p>New Task</p>
* <i class="fa fa-plus">
* </div>
* </div>
*/
var addCategory = document.querySelector('#addCategory');
addCategory.onclick = function() {
board.insertBefore(newCategory, addCategory);
};
};
<div id="board">
<div class="category hidden" id="model">
<div class="newTask">
<p>New task</p>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
<div class="category">
<div class="newTask">
<p>New task</p>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<div class="task">
<h3>Task title</h3>
<p>This is the description of what we have to do</p>
</div>
</div>
<div class="category" id="addCategory">
<h3>Add a category</h3>
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</div>
</div>
So this is what's happening : https://i.neilrichter.com/c7kd3.gif (File too large sorry)
How would you solve this ? I forgot to mention it, but I'm not allowed to use jQuery...
You are only creating the div once (when the window loads) and then inserting that same div every time the onclick handler runs.
You need to create a new div each time the onclick handler runs:
window.onload = function() {
var board = document.querySelector('#board');
var model = document.querySelectorAll('#model');
var addCategory = document.querySelector('#addCategory');
addCategory.onclick = function() {
var newTask = document.createElement('div');
newTask.className='newTask';
newTask.appendChild(document.createElement('p'));
newTask.querySelector('p').innerHTML = 'New Task';
newTask.appendChild(document.createElement('i'));
newTask.querySelector('i').className = 'fa fa-plus';
var newCategory = document.createElement('div');
newCategory.className = 'category';
newCategory.appendChild(newTask);
board.insertBefore(newCategory, addCategory);
};
};
<div id="board">
<div class="category hidden" id="model">
<div class="newTask">
<p>New task</p>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
</div>
<div class="category">
<div class="newTask">
<p>New task</p>
<i class="fa fa-plus" aria-hidden="true"></i>
</div>
<div class="task">
<h3>Task title</h3>
<p>This is the description of what we have to do</p>
</div>
</div>
<div class="category" id="addCategory">
<h3>Add a category</h3>
<i class="fa fa-plus-circle" aria-hidden="true"></i>
</div>
</div>
Note questions that have already been posted does not solves my problem. The above are the displays from my side menu bar, I want when the user click on a link its content are displayed on the same page and the other div content are hidden. I tried the codes below but they seem not working.
$('a.common').click(function() {
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
The problem was that you had $('a.button') instead of $('a.common')
You also want a css to hide the divs at the beginning.
And also when you fade in a new div, you need to hide the current one.
$('a.common').click(function() {
var id = $(this).attr('href');
$("#divs div").hide();
$(id).fadeIn('slow', function() {
// Animation complete
});
});
#divs div {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="divs">
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
</div>
The problem is in your jQuery selector:
//This ona means that you are searching for tag a with class button
$('a.abutton').click(function() {})
//You should use:
$('a.common').click(function() {})
// Because your a tags has class 'common'
There was 2 problem
Your <div> tag is not closed properly in your <li>
Initially you are not hiding your div so it can be fade in once you click on it.
Here is the fiddle for your code https://jsfiddle.net/2tkfq87o/
First thing is that your html had an error. On <div> element was not added. Secondly you never called hide() on all the divs at the start because of which none of them were hidden. You had only fadeIn. If all divs are visible, it makes no sense to call fadeIn.
So hide them first. Then call fadeIn on click and at the same time hide the div present already.
$(document).ready(function() {
$('a.common').click(function() {
hideAllDivs();
var id = $(this).attr('href');
$(id).fadeIn('slow', function() {
// Animation complete
});
});
var hideAllDivs = function() {
$('#div1').hide();
$('#div2').hide();
$('#div3').hide();
}
hideAllDivs();
$('#div1').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="canvas">
<div id="nav">
<h2 id="title">
<i class="fa fa-sitemap">
</i> MENU</h2>
<ul id="toggle">
<li>
<div class="active border">
HOME
</div>
</li>
<li>
<div>
<span class="menu-icons fa fa-user"></span>
ABOUT US
</div>
</li>
<li>
<div>
PORTFOLIO
</div>
</li>
<li>
<div>
CONTACT
</div>
</li>
</ul>
</div>
<i class="fa fa-bars"></i>
<div id="div1">TEST ONE</div>
<div id="div2">TEST TWO</div>
<div id="div3">TEST THREE</div>
</div>
</div>
I have created a global Jquery to add and remove class toggle function for various elements through my page. JsFiddle
The toggle class displays a hidden div which overlays the original div. Within the overlay i have created a close button is an attempt to remove the hidden div.
I am having slight issue in removing a the toggle class with the close button. Below is my code
$('.details-btn').click(function(){
var $panel = $(this).closest('.square').find('.i-panel');
if ($panel.hasClass('inactive')) {
$('.square .i-panel').addClass('inactive');
$panel.removeClass('inactive');
} else {
$panel.addClass('inactive');
}
});
HTML
<div class="item-container small-6 relative">
<div class="square">
<span class="exclusive-tag-3 cap-txt absolute">
<p class="absolute">New</p>
</span>
<img src="http://myjpg">
<div class="item-details">
<ul>
<li class="small-5">
<p>ICON</p>
</li>
<!-- INFO BTN -->
<li class="small-5 details-btn">
<i class="fa fa-info-circle">OPEN</i>
</li>
<!-- INFO BTN ENDS -->
</ul>
</div>
<div class="d-hidden i-panel inactive absolute">
<article class="global-padding">
</article>
<footer class="absolute">
<ul class="global-padding">
<li class="small-5">
<a>
<p class="heading-5">Details</p>
</a>
</li>
<li class="small-3">
<a>
<p class="heading-5">
<i class="fa fa-envelope-o">SEND</i>
</p>
</a>
</li>
<li class="small-3">
<a>
<p class="heading-5">
<i class="fa fa-times">close</i>
</p>
</a>
</li>
</ul>
</footer>
</div>
</div> <!-- SQUARE ENDS HERE -->
</div> <!-- ITEM-CONTAINER ELEMENTS ENDS -->
You don't have a click handler for the close button, so only the open button is triggering the class toggle, you need to add the class details-btn to the close button as well or create a new click handler.
Try replacing
<p class="heading-5">
<i class="fa fa-times">close</i>
</p>
with
<p class="heading-5 details-btn">
<i class="fa fa-times">close</i>
</p>
Your Jquery function is triggered when you click on an element that has the class details-btn on it, therefore you must add class details-btn to your close button like this:
<i class="fa fa-times details-btn">close</i>