I'm super new to JS but I wanted a really simple accordion so I built one. For some reason I am at a loss when trying to add an easing effect to the opening / closing of it. Any help would be much appreciated. Thank you!
CodePen of Accordion
js code:
(function(){
// This class will be added to the expanded item
var activeItemClass = 'accordion-expanded';
var accordionItemSelector = '.accordion-section';
var toggleSelector = '.accordion-head';
$(toggleSelector).on('click', function() {
$(this)
.closest(accordionItemSelector) // go up to the accordion item element
.toggleClass(activeItemClass)
.siblings()
.removeClass(activeItemClass);
});
})();
Since you're using jQuery, why not this:
var accordionItemSelector = '.accordion-body';
var toggleSelector = '.accordion-head';
$(toggleSelector).on('click', function() {
if (!$(this).next(accordionItemSelector).is(":visible"))
$(toggleSelector).not($(this)).next(accordionItemSelector).slideUp();
$(this).next(accordionItemSelector).slideToggle();
});
UPDATED PEN
Here is working code for accordion :-
$(document).ready(function(){
$('.item').click(function (){
if($(this).next('.item-data').css('display') != 'block'){
$('.active').slideUp('fast').removeClass('active');
$(this).next('.item-data').addClass('active').slideDown('slow');
} else {
$('.active').slideUp('fast').removeClass('active');
}
});
});
and HTML
<div class='container'>
<div class='item'>Item 1</div>
<div class='item-data'>
<div>
This is the content for Accordion 1
</div>
</div>
<div class='item'>Item 2</div>
<div class='item-data'>
<div>
This is the content for Accordion 2
</div>
</div>
<div class='item'>Item 3</div>
<div class='item-data' >
<div>
This is the content for Accordion 3
</div>
</div>
<div class='item'>Item 4</div>
<div class='item-data' >
<div>
This is the content for Accordion 4
</div>
</div>
CSS
<style type="text/css">
.container
{
display:block;
width: 500px;
height : auto ;
margin: 0 auto;
}
.item
{
display : block;
width : inherit ;
height : 40px;
line-height : 40px;
background : #555 ;
border: 1px solid #000 ;
cursor: pointer;
color: #fff;
}
.item-data
{
display : none ;
width : inherit ;
height : auto ;
border: 1px solid #ccc;
}
.active {
background : #eee ;
color : #000 ;
}
.item-data div{
margin: 30px;
}
</style>
Related
Been playing around with the scroll snapping, looks like it saves a lot of head scratching with writing the functionality in JS.
Here's a challenge, has anyone out there found a way to selectively choose which children to snap and which children to freely scroll?
I think this will be useful for content rich pages that contain parts that wouldn't benefit from scroll snapping.
Here's an example of the problem:
https://codepen.io/nodelondon/pen/YzxWqLG
html {
background: #f2f2f2;
}
.scroll-container,
.scroll-area-none,
.scroll-area {
max-width: 850px;
height: 600px;
font-size: 60px;
}
.scroll-area-none {
scroll-snap-align: none;
background-color: black;
}
.scroll-container {
overflow: auto;
scroll-snap-type: y mandatory;
}
.scroll-area {
scroll-snap-align: start;
}
.scroll-container,
.scroll-area-none,
.scroll-area {
margin: 0 auto;
}
.scroll-area-none,
.scroll-area {
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.scroll-area:nth-of-type(4n+1) {
background: #49b293;
}
.scroll-area:nth-of-type(4n+2) {
background: #c94e4b;
}
.scroll-area:nth-of-type(4n+3) {
background: #4cc1be;
}
.scroll-area:nth-of-type(4n+4) {
background: #8360A6;
}
<div class="support-scrollsnap"></div>
<div class="scroll-container">
<div class="scroll-area-none">-1</div>
<div class="scroll-area-none">0</div>
<div class="scroll-area">1</div>
<div class="scroll-area">2</div>
<div class="scroll-area">3</div>
<div class="scroll-area">4</div>
<div class="scroll-area-none">5</div>
<div class="scroll-area-none">6</div>
</div>
Ideally, the boxes with -1,0,5 and 6 should be able to freely scroll but the mandatory boxes in between keep pulling you back.
If you're thinking of suggesting changing it to proximity, this is a good suggestion, but, with IOS Safari (On OSX Safari for me as well), unfortunately it still forces scroll snapping on boxes that have scroll-snap-align set to Start no matter where you are on the page.
Found that changing scroll-snap-type on documentElement causes the scroll to jump to the nearest snap-align element, which seems to look awful.
Looks like the simplest fix is working fine:
let t = window.scrollY;
requestAnimationFrame(() => window.scroll(0, t));
I propose the following logic:
Define which children block is at the top border of the scroll container. I am using the Element.getBoundingClientRect() method to compare positions of the scroll container and its children.
Check which scroll-snap-align property has this child block.
Set the scroll-snap-type property of the container as y proximity or y mandatory.
Handle the scroll event on desktop, On mobile this event works at the end of the scroll, so we need something else for mobile (may be jQuery Mobile).
Here is a working draft solution. But it requires optimizations and improvements such as scroll event throttling.
https://codepen.io/glebkema/pen/zYdPqeY
let scrollContainers = document.getElementsByClassName('scroll-container');
for (let sc of scrollContainers) {
sc.addEventListener('scroll', updateSnapType);
sc.addEventListener('touchstart', updateSnapType);
}
function updateSnapType(event) {
let parent = event.currentTarget;
let parentRect = parent.getBoundingClientRect();
for (let child of parent.children) {
let childRect = child.getBoundingClientRect();
if (childRect.top <= parentRect.top && parentRect.top < childRect.bottom) {
let childStyle = window.getComputedStyle(child);
let scrollSnapAlign = childStyle.getPropertyValue('scroll-snap-align');
console.log(child.innerText, scrollSnapAlign);
parent.style.scrollSnapType = "none" === scrollSnapAlign ? 'y proximity' : 'y mandatory';
break;
}
}
}
html {
background: #f2f2f2;
}
.scroll-container,
.scroll-area-none,
.scroll-area {
height: 100px;
font-size: 60px;
}
.scroll-container {
max-width: 850px;
margin: 15px auto;
overflow: auto;
scroll-snap-type: y mandatory;
}
.scroll-area {
scroll-snap-align: start;
}
.scroll-area-none {
scroll-snap-align: none;
background-color: black;
}
.scroll-area-none,
.scroll-area {
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.scroll-area:nth-of-type(4n+1) {
background: #49b293;
}
.scroll-area:nth-of-type(4n+2) {
background: #c94e4b;
}
.scroll-area:nth-of-type(4n+3) {
background: #4cc1be;
}
.scroll-area:nth-of-type(4n+4) {
background: #8360A6;
}
<div class="scroll-container">
<div class="scroll-area-none">1. -1</div>
<div class="scroll-area-none">1. 0</div>
<div class="scroll-area">1. 1</div>
<div class="scroll-area">1. 2</div>
<div class="scroll-area">1. 3</div>
<div class="scroll-area">1. 4</div>
<div class="scroll-area-none">1. 5</div>
<div class="scroll-area-none">1. 6</div>
</div>
<div class="scroll-container">
<div class="scroll-area-none">2. -1</div>
<div class="scroll-area-none">2. 0</div>
<div class="scroll-area">2. 1</div>
<div class="scroll-area">2. 2</div>
<div class="scroll-area">2. 3</div>
<div class="scroll-area">2. 4</div>
<div class="scroll-area-none">2. 5</div>
<div class="scroll-area-none">2. 6</div>
</div>
I have multiple hoverable divs which change when being hovered... When i get off them with the mouse they return to their normal position. I would like for them to stay hovered unless another div with the same class gets hovered. So one should stay hovered. Sort of like being able to select only one div but with hovering
I tried everything that is in my knowledge
<html>
<head>
<style media="screen">
.hoverable:hover {
background-color: red;
}
.hoverable {
width: 100px;
height: 100px;
background-color: blue;
transition-duration: 1s;
}
</style>
</head>
<body>
<div class="hoverable">
lorem
</div>
<div class="hoverable">
Lorem
</div>
<div class="hoverable">
Lorem
</div>
<div class="hoverable">
Lorem
</div>
</body>
</html>
hope you are looking for something like this
$("div.hoverable").hover(function() {
$("div.hoverable").removeClass("hovered");
$(this).addClass("hovered");
})
div.hoverable {
height: 30px;
width: 300px;
background-color: #ccc;
border: 1px solid #666;
margin: 5px;
}
div.hovered {
color: red;
background-color:yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="hoverable">
1
</div>
<div class="hoverable">
2
</div>
<div class="hoverable">
3
</div>
<div class="hoverable">
4
</div>
There are a few ways you could accomplish this. The easiest that comes to mind is to not use the browser hover style but apply a class dynamically only on mouseenter:
let lastHovered = null;
const onHover = (event) => {
if (lastHovered != null) {
lastHovered.classList.remove('hovered');
}
event.target.classList.add('hovered');
lastHovered = event.target;
}
for (const div of document.getElementsByClassName('hoverable')) {
div.onmouseenter = onHover;
}
Here's an example: https://codepen.io/minism/pen/PooRKqx
I wouldn't use the :hover pseudo-class. Instead, define a class and toggle it with the mouseover event.
var elArray = document.querySelectorAll('.hoverme');
elArray.forEach(function(el) {
el.addEventListener('mouseover', function() {
elArray.forEach(function(el) {
el.classList.remove('hovered');
});
this.classList.add('hovered');
});
});
Working example: https://codepen.io/peiche/pen/wvvmqGZ
I found posts and online articles on how to do something like this but most examples are not in plain JavaScript. So this script works almost perfectly if all the sections are the same height for example 220px. So I thought I was getting closer in having this script working how I want it to work like overtime but then I realize
it had flaws when I decided to change the sections height and play around with the code more to see if it had any flaws that I was unaware of so basically this script is designed to output the name
of the sections that are visible but it is not showing the correct output for example if section 1 is the only one that is visible in the div it will say section-1 if multiple sections are visible it will say for example section-1,section-2 etc. Basically it should work like this regardless of the sections height
I know I have to change the code or altered it but I'm getting more confused the more I play around with it so how can I pull this off so I can always have the correct output? If I have to change my code completely to be able to do this then I don't mind.
This is my code
document.addEventListener('DOMContentLoaded',function(){
document.querySelector('#building').addEventListener('scroll',whichSectionsAreInSight);
function whichSectionsAreInSight(){
var building= document.querySelector('#building');
var top = building.scrollTop;
var bottom = top+building.offsetHeight;
var arr = [];
Array.prototype.forEach.call(
building.querySelectorAll('#building .sections'),
function(sections){
if ((sections.offsetTop < top && top <sections.offsetTop+sections.offsetHeight) || (sections.offsetTop < bottom && bottom < sections.offsetTop+sections.offsetHeight)){
arr.push(sections.id);
}
}
);
document.querySelector('#status').innerHTML = arr.join(',')
}
whichSectionsAreInSight();
});
h1{
margin: 0;
text-align: center;
}
#building{
background-color: gray;
height: 200px;
width: 200px;
overflow: auto;
}
.sections{
height: 80px;
width: 100%;
}
#section-1{
background-color: dodgerblue;
}
#section-2{
background-color: gold;
}
#section-3{
background-color: red;
}
#section-4{
background-color: gray;
height: 220px;
}
<p id='status'></p>
<div id='building'>
<div id='section-1' class='sections'><h1>Section 1</h1></div>
<div id='section-2' class='sections'><h1>Section 2</h1></div>
<div id='section-3' class='sections'><h1>Section 3</h1></div>
<div id='section-4' class='sections'><h1>Section 4</h1></div>
</div>
You were pretty close!
First off, you need to set the parent element to position:relative otherwise the parent that is being measured against is the document.
Also, the algorithm is simpler than what you had. Just make sure that the top of the element is less than the bottom of the parent, and the bottom of the element is greater than the top of the parent.
In your case this is offsetTop < bottom and offsetTop + offsetHeight > top
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#building').addEventListener('scroll', whichSectionsAreInSight);
function whichSectionsAreInSight() {
var building = document.querySelector('#building');
var top = building.scrollTop;
var bottom = top + building.offsetHeight;
var arr = [];
Array.prototype.forEach.call(
building.querySelectorAll('#building .sections'),
function(section) {
if (section.offsetTop < bottom && section.offsetTop + section.offsetHeight > top) {
arr.push(section.id);
}
}
);
document.querySelector('#status').innerHTML = arr.join(',')
}
whichSectionsAreInSight();
});
h1 {
margin: 0;
text-align: center;
}
#building {
background-color: gray;
height: 200px;
width: 200px;
overflow: auto;
position: relative;
}
.sections {
height: 80px;
width: 100%;
}
#section-1 {
background-color: dodgerblue;
}
#section-2 {
background-color: gold;
}
#section-3 {
background-color: red;
}
#section-4 {
background-color: gray;
height: 220px;
}
<p id='status'></p>
<div id='building'>
<div id='section-1' class='sections'>
<h1>Section 1</h1>
</div>
<div id='section-2' class='sections'>
<h1>Section 2</h1>
</div>
<div id='section-3' class='sections'>
<h1>Section 3</h1>
</div>
<div id='section-4' class='sections'>
<h1>Section 4</h1>
</div>
</div>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Given a parent div that can scroll vertically and has possibly nested elements within it, how can I get the (innermost) element that currently occupies the top end of the parent div?
For example, suppose I have the parent div as the light blue area in the diagram below, and it has objects in it, that are colored blue or red, some parts of them being outside of the parent div (which should actually be hidden). I want to get the object colored in red.
I can probably do this by comparing the offsetTop of the child elements with that of the parent element, and recursively go inside.
Run the code snippet below to see one solution. Scroll the window to move the divs relative to the window, then click the button to see the id of the innermost div that is at the top of the window. This solution assumes all divs are "normally" nested, i.e. there is no re-arrangement of div vertical placement by fancy css work, no fixed positions, etc.
There are two versions below: the first uses jQuery, the second does not.
$("button#check").click(function() {
var topElem = $("body")[0]; // start at the outermost, i.e. the body
var checkChildDivs = function() { // define the recursive checking function
var children = $(topElem).children("div").not("div#info"); // get all child divs
if (children.length > 0) { // if there are any child divs
$(children).each(function(index, elem) { // check each of them
var posns = getPosns($(elem)); // get their top and bottom posns
// relative to the top of the screen
if ((posns.top <= 0) && (posns.bottom >= 0)) { // if the div overlaps the screen top
topElem = elem; // make this the new innermost div
checkChildDivs(); // check any deeper child divs
return false; // no need to check any lower sibling divs
}
});
}
};
checkChildDivs(); // initiate the checking recursion
$("div#info").text($(topElem).attr("id") || "none, i.e. body"); // report the innermost top div id
});
function getPosns($elem) {
var top = $elem.offset().top; // get the top of the div relative to the document
var hgt = $elem.outerHeight(); // get the height of the element
var wst = $(window).scrollTop(); // get the height of window hidden above the top of the screen
return { // return the top and bottom distances of the element
top: (top - wst), // relative to the top of the screen
bottom: (top - wst + hgt)
};
}
body {
background-color: blue;
}
div {
border: solid black 2px;
padding: 1em;
margin: 1em;
background-color: magenta;
}
div > div {
background-color: red;
}
div > div > div {
background-color: orange;
}
div >div > div > div {
background-color: yellow;
}
button#check {
position: fixed;
height: 2em;
}
div#info {
position: fixed;
background-color: white;
border-width: 1px;
opacity: 0.7;
top: 3em;
left: -0.2em;
height: 1.5em;
width: 15em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="check">Determine Id of Innermost Div at Screen Top</button>
<div id="info"></div>
<div id="a">a
<div id="aa">aa
<div id="aaa">aaa</div>
<div id="aab">aab
<div id="aaba">aaba</div>
<div id="aabb">aabb</div>
<div id="aabc">aabc</div>
</div>
<div id="aac">aac</div>
</div>
<div id="ab">ab
<div id="aba">aba</div>
<div id="abb">abb</div>
<div id="abc">abc</div>
</div>
<div id="ac">ac
<div id="aca">aca</div>
<div id="acb">acb</div>
<div id="acc">acc</div>
</div>
</div>
<div id="b">b
<div id="ba">ba
<div id="baa">baa</div>
<div id="bab">bab</div>
<div id="bac">bac</div>
</div>
<div id="bb">bb
<div id="bba">bba</div>
<div id="bbb">bbb</div>
<div id="bbc">bbc</div>
</div>
<div id="bc">bc
<div id="bca">bca</div>
<div id="bcb">bcb</div>
<div id="bcc">bcc</div>
</div>
</div>
<div id="c">c
<div id="ca">ca
<div id="caa">caa</div>
<div id="cab">cab</div>
<div id="cac">cac</div>
</div>
<div id="cb">cb
<div id="cba">cba</div>
<div id="cbb">cbb</div>
<div id="cbc">cbc</div>
</div>
<div id="cc">cc
<div id="cca">cca</div>
<div id="ccb">ccb</div>
<div id="ccc">ccc</div>
</div>
</div>
And here is a non-jQuery version of the same thing:
var doc = document;
doc.getElementById("check").onclick = function() {
var topElem = doc.getElementsByTagName("body")[0]; // start at the outermost, i.e. the body
var checkChildDivs = function() { // define the recursive checking function
var children = topElem.childNodes; // get all child nodes
if (children.length > 0) { // if there are any child nodes
[].forEach.call(children, function(elem, index, arr) { // check each of them
if (elem.toString() === "[object HTMLDivElement]" && elem.id !== "info") {
// only use divs that do not have id "info"
var posns = getPosns(elem); // get their top and bottom posns
// relative to the top of the screen
if ((posns.top <= 0) && (posns.bottom >= 0)) { // if the div overlaps the screen top
topElem = elem; // make this the new innermost div
checkChildDivs(); // check any deeper child divs
return false; // no need to check any lower sibling divs
}
}
});
}
};
checkChildDivs(); // initiate the checking recursion
doc.getElementById("info").innerHTML = (topElem.id || "none, i.e. body");
// report the innermost top div id
};
function getPosns(elem) {
var top = elem.getBoundingClientRect().top + window.pageYOffset - doc.documentElement.clientTop;
// get the top of the div relative to the document
var hgt = elem.offsetHeight; // get the height of the element
var wst = window.scrollY; // get the height of window hidden above the top of the screen
return { // return the top and bottom distances of the element
top: (top - wst), // relative to the top of the screen
bottom: (top - wst + hgt)
};
}
body {
background-color: blue;
}
div {
border: solid black 2px;
padding: 1em;
margin: 1em;
background-color: magenta;
}
div > div {
background-color: red;
}
div > div > div {
background-color: orange;
}
div >div > div > div {
background-color: yellow;
}
button#check {
position: fixed;
height: 2em;
}
div#info {
position: fixed;
background-color: white;
border-width: 1px;
opacity: 0.7;
top: 3em;
left: -0.2em;
height: 1.5em;
width: 15em;
}
<button id="check">Determine Id of Innermost Div at Screen Top</button>
<div id="info"></div>
<div id="a">a
<div id="aa">aa
<div id="aaa">aaa</div>
<div id="aab">aab
<div id="aaba">aaba</div>
<div id="aabb">aabb</div>
<div id="aabc">aabc</div>
</div>
<div id="aac">aac</div>
</div>
<div id="ab">ab
<div id="aba">aba</div>
<div id="abb">abb</div>
<div id="abc">abc</div>
</div>
<div id="ac">ac
<div id="aca">aca</div>
<div id="acb">acb</div>
<div id="acc">acc</div>
</div>
</div>
<div id="b">b
<div id="ba">ba
<div id="baa">baa</div>
<div id="bab">bab</div>
<div id="bac">bac</div>
</div>
<div id="bb">bb
<div id="bba">bba</div>
<div id="bbb">bbb</div>
<div id="bbc">bbc</div>
</div>
<div id="bc">bc
<div id="bca">bca</div>
<div id="bcb">bcb</div>
<div id="bcc">bcc</div>
</div>
</div>
<div id="c">c
<div id="ca">ca
<div id="caa">caa</div>
<div id="cab">cab</div>
<div id="cac">cac</div>
</div>
<div id="cb">cb
<div id="cba">cba</div>
<div id="cbb">cbb</div>
<div id="cbc">cbc</div>
</div>
<div id="cc">cc
<div id="cca">cca</div>
<div id="ccb">ccb</div>
<div id="ccc">ccc</div>
</div>
</div>
You can use this library : https://github.com/customd/jquery-visible .
Check my snippet for demo
$(function() {
$(window).on('scroll', function() {
$visible = null;
$('section > div').each(function() {
if (!$visible && $(this).visible(true)) {
$visible = $(this);
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
$('#answer').html('' + $visible.text());
});
});
#main1,
#main2,
#main3,
#main4 {
display: block;
padding: 10px;
}
body {
background: blue;
}
section > div {
display: block;
width: 100%;
background: lightblue;
margin-bottom: 10px;
}
section > div.active {
background: red;
}
#answer {
display: block;
position: fixed;
bottom: 0;
height: 30px;
width: 300px;
background: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://opensource.teamdf.com/visible/jquery.visible.js"></script>
<section id="main1">
<div style="height:100px;">child 1</div>
</section>
<section id="main2">
<div style="height:100px;">child 2</div>
</section>
<section id="main3">
<div style="height:100px;">child 3</div>
</section>
<section id="main4">
<div style="height:300px;">child 4</div>
<div style="height:400px;">child 5</div>
</section>
<div id="answer"></div>
I have a code that I am working on so that it has a heading tag and an arrow floated to the right and when you click on that arrow it shows the contents of the hidden element and changes the down arrow to an up arrow. Everything seems to work fine except the links I have under the image within the toggle do not work. I cannot highlight the text for some reason so I am assuming that there is an overlap somewhere in my coding.
The JavaScript
function toggleDisplayNewark() {
document.getElementById("toggleMe").style.display == "none";
if(document.getElementById("toggleMe").style.display == "none" ) {
document.getElementById("toggleMe").style.display = "inline";
document.getElementById("toggleMe").style.visibility = "visible";
document.getElementById("arrow").style.background = "url(img/up.png) no-repeat";
} else {
document.getElementById("toggleMe").style.display = "none";
document.getElementById("arrow").style.background = "url(img/down.png) no-repeat";
}
}
The HTML
<div id='newark'>
<div class='text-heading'>
<h2>Newark</h2>
<a href="#newark" onclick="toggleDisplayNewark();">
<div id='arrow'></div>
</a>
</div>
<div id='toggleMe' style='display: none;'>
<div class='alignleft thumb-imgs'>
<img src='img/excercise.png' />
<a href='http://exercise.com/' target='_blank'>Exercise Institute</a>
</div>
<div class='clear'></div>
</div>
</div>
The CSS
#arrow {background: url(http://emf-websolutions.com/wp-content/uploads/2013/03/down.png) no-repeat; height: 27px; width: 29px; float: right; margin: -30px 10px 0 0;}
#toggleMe {display: none;}
.text-heading {-webkit-border-radius: 5px; border-radius: 5px; margin: 10px 0; width: 640px; padding: 5px 0px; background: #333; border: 1px solid red;}
.clear {clear: both;}
.thumb-imgs {width: 204px; height: 210px; padding: 5px 5px 40px 5px;}
I built this in a html file before I put it into wordpress so I could make sure that it works properly. I just can't seem to find where the problem lies. I have striped down the coding so that it would not take up so much space. The idea of this is to have a heading with an arrow in the right side to drop down this box with 3 images with a link under each one for each line.
Thanks for your help in advance.
http://jsfiddle.net/QXSXC/
remove the onclick
<a href="#newark" >
and use jQuery:
$('#newark').click(function() {
document.getElementById("toggleMe10").style.display == "none";
if(document.getElementById("toggleMe10").style.display == "none" ) {
document.getElementById("toggleMe10").style.display = "inline";
document.getElementById("toggleMe10").style.visibility = "visible";
document.getElementById("arrow10").style.background = "url(img/up.png) no-repeat";
} else {
document.getElementById("toggleMe10").style.display = "none";
document.getElementById("arrow10").style.background = "url(img/down.png) no-repeat";
}
});
You can assign a handler to #newarkwith pure JS google it if you can't use jQuery