FAQ Toggle Arrow Animation - javascript

Hello I have below code for FAQ Toggle but the issue is when I click on any question it slides and show the answer perfectly but the all arrows in all question triggers.
<div class="faqbox" id="faq-list">
<div class="qblock">
<span class="arrow"></span>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h2>
<div class="answer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>
</div><!-- answer -->
</div><!-- qblock -->
<div class="qblock">
<span class="arrow"></span>
<h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</h2>
<div class="answer">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.</p>
</div><!-- answer -->
</div><!-- qblock -->
</div><!-- faqbox -->
This is the JS
function toggleFaqArrow(){
$('.qblock .arrow').toggleClass('rotate');
}
$(document).ready(function() {
$('.qblock h2').click(function(){
$(this).next('.answer').slideToggle(500);
$(this).toggleClass('close');
toggleFaqArrow();
});
});


Your toggleFaqArrow() function targets all arrow class elements inside all qblock class elements. You only want to toggle the rotate class of the sibling with class arrow of the h2 element clicked.
To achieve this, change your JS to:
$(document).ready(function() {
$('.qblock h2').click(function(){
$(this).next('.answer').slideToggle(500);
$(this).toggleClass('close');
$(this).siblings('.arrow').toggleClass('rotate');
});
});

Related

Converting JavaScript data to JSON

I am using the following code to dynamically add items to a page. I have each component as an object then I call each individual one with a For-in loop.
My question is, how can I convert my data to JSON, and then import it into my JS file to use?
const pageObjects = {
objectComponent1 : {
provideTitle: "Title",
provideId: "title",
provideDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Id aliquet risus feugiat in. Eget velit aliquet sagittis id consectetur purus. Non consectetur a erat nam at lectus urna duis. Convallis aenean et tortor at risus viverra adipiscing at. ",
provideHtml: `<p class="test">This is a pragraph element.</p>`,
},
objectComponent2: {
provideTitle: "Title",
provideId: "title",
provideDesc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Id aliquet risus feugiat in. Eget velit aliquet sagittis id consectetur purus. Non consectetur a erat nam at lectus urna duis. Convallis aenean et tortor at risus viverra adipiscing at.",
provideHtml: `<p class="test">This is a pragraph element.</p>`,
},
};
const docsContent = document.querySelector(".docs-content");
for (const singleObject in pageObjects) {
// add title
let objectTitle = document.createElement("h2");
objectTitle.setAttribute("id", pageObjects[singleObject].provideId);
objectTitle.innerHTML = pageObjects[singleObject].provideTitle;
docsContent.append(objectTitle);
// add description
let objectDesc = document.createElement("p");
objectDesc.innerHTML = pageObjects[singleObject].provideDesc;
docsContent.append(objectDesc);
// add example
let objectExample = document.createElement("div");
objectExample.classList.add("docs-example");
objectExample.innerHTML = pageObjects[singleObject].provideHtml;
docsContent.append(objectExample);
// add provide code
let objectCode = document.createElement("div");
objectCode.classList.add("docs-code");
docsContent.append(objectCode);
let pre = document.createElement("pre");
objectCode.append(pre);
let code = document.createElement("code");
code.innerHTML = pageObjects[singleObject].provideHtml;
pre.append(code);
};

Remove Word from Paragraph Using Javascript

I'm trying to remove a word from a paragraph using javascript. So far I've written this, but no luck with having it remove the word.
The word I'm trying to remove is S\n\nSubheadline space\n\n
jQuery(function($) {
document.body.innerHTML = document.body.innerHTML.replace( 'S\n\nSubheadline space\n\n', "");
});
<p><span class="excerpt_part"><strong>HANDRAIL</strong>S\n\nSubheadline space\n\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis…</span></p>

There are 2 problems:
You're not invoking the function properly (you aren't using jQuery anywhere either - I'd just remove that part entirely)
The innerHTML does not contain literal newlines, but backslash characters followed by n:
const spanText = document.querySelector('span').innerHTML;
console.log(spanText);
console.log(spanText.length);
<span>\n</span>
The behavior of \n is not the same in JS (where the backslash is an escape character) as it is in HTML markup (where the backslash is not an escape character).
So you need to match a literal backslash followed by an n, which requires writing out two backslashes in a JS string literal:
document.body.innerHTML = document.body.innerHTML.replace( 'S\\n\\nSubheadline space\\n\\n', "");
<p><span class="excerpt_part"><strong>HANDRAIL</strong>S\n\nSubheadline space\n\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis…</span></p>

You have to escape the newline chars with an extra backslash.
document.body.innerHTML = document.body.innerHTML.replace('S\\n\\nSubheadline space\\n\\n', "")
<p><span class="excerpt_part"><strong>HANDRAIL</strong>S\n\nSubheadline space\n\n Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis…</span></p>

Index of Selected Tab with some Hidden Tabs (jQuery)

I have a tab control, and I am trying to get the index of the selected Tab, but I have a problem. I have some hidden tabs before the selected, and I am getting an Index like this:
Tab1 - Tab2(hidden) - Tab3(hidden) - Tab4
When I try to get the index of Tab4, I get 1, but I want to get a 3 (index from 0 to 3).
I am using ui.newTab.index() for this, and It ignore the hidden tabs.
Thanks and good coding!!
Edit. This is my code:
jQuery("#testTabs").tabs({ heightStyle: "fill", activate: function (event, ui) {
var index = ui.newTab.index();
}
});
It's in the event.

Are you using jQuery 1.10+ cause 1.8 and earlier (I think) uses select not activate?
Btw your code has no linked query, make a fiddle with linked jQ and add in HTML while you are at it?
I refactored someone's Fiddle to have a hidden element and it still works (open the console and see). So I don't think your problem is with hidden. Maybe display: none? Than tab is not even in DOM.
<div id="tabs">
<ul>
<li><span>One</span></li>
<li style="visibility: hidden;"><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<p>First tab is active by default:</p>
<pre><code>$( "#tabs" ).tabs(); </code></pre>
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
JS
$( "#tabs" ).tabs({
activate: function( event, ui ) {
console.log(ui.newTab.index());
}
});
this fiddle

Div's not moving with others

So I'm trying to make it so these divs all move accordingly. So if one row object is shorter than the other, the next row object will pull up twoards it.
This is my problem:
Please help. My div is set to display: inline-block;
http://prntscr.com/4g99di
http://prntscr.com/4g99g3

Can you generate the HTML as columns rather than rows?
Instead of:
row
YouTube
News
Recent Posts
/row
row
Vote
Donate
/row
Maybe do:
row
col
YouTube
Vote
/col
col
News
Donate
/col
col
Recent Posts
/col
/row

Try it with masonry plugin. Here is my example:
HTML:
<script src="http://masonry.desandro.com/js/masonry-docs.min.js"></script>
<div id="container">
<div class="item">
<h2>DIV 1</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</div>
<div class="item">
<h2>DIV 2</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</div>
<div class="item">
<h2>DIV 3</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="item">
<h2>DIV 4</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
</div>
</div>
JS:
var container = document.querySelector('#container');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.item'
});
CSS:
.item {
display: inline-block;
width: 200px;
}
jsfiddle example:
http://jsfiddle.net/1ba5t64b/

You can use the CSS3 column to solve this problem:
Apply this class in content
-webkit-column-width: 300px; /* Chrome, Safari, Opera */
-moz-column-width: 300px; /* Firefox */
column-width: 300px;
-webkit-column-gap: 20px; /* Chrome, Safari, Opera */
-moz-column-gap: 20px; /* Firefox */
column-gap: 20px;
you can see an example in http://codepen.io/oriolet/pen/avztJ/

How to make slide effect for a single div?

I have main div which has many div like grid inside it. actually now horizontal scroll working but i want to make slide effect like [this][2]
sliding has to be done according to screen size not depending on the div.
I tried like this
<!DOCTYPE html>
<html>
<head>
<!-- META -->
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1">
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<style type="text/css">
.fluidHeight {
position: relative;
width: 800px;
height: 800px;
}
/*
* below 900px, switch to percentage based responsive height.
* padding of 33.333% is calculated by using the
* image ratio 300px/900px = .333 * 100% = 33.333%
*/
#media screen and (max-width: 900px) {
.fluidHeight {
height: 0;
padding: 0 0 33.333% 0;
}
}
.sliderContainer {
position: absolute;
width: 800px;
height: 800px;
}
.iosSlider {
width: 800px;
height: 800px;
background: #aaa;
}
.iosSlider .slider {
width: 100%;
height: 100%;
}
.iosSlider .slider img {
position: relative;
top: 0;
left: 0;
width: 800px;
margin: 0 0 0 0;
}
.div-body_2_col {
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
padding:5px;
height: 800px;
}
</style>
<!-- jQuery library -->
<script type="text/javascript" src = "../../../_lib/jquery-1.4.min.js"></script>
<script type="text/javascript" src = "../../../_lib/jquery.easing-1.3.js"></script>
<!-- iosSlider plugin -->
<script src = "../../../_src/jquery.iosslider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.iosSlider').iosSlider({
snapToChildren: true,
desktopClickDrag: true,
infiniteSlider: true
});
});
</script>
<title>Ex #12: Image Slides</title>
</head>
<body>
<div class = 'fluidHeight'>
<div class = 'sliderContainer'>
<div class = 'iosSlider'>
<div class = 'slider'>
<div class="div-body_2_col">
<div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
111.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
<div class="newspaper" id="newspaper2" onClick="fn('newspaper2');">
2.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div><div class="newspaper" id="newspaper1" onClick="fn('newspaper1');">
1.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Can any one help me
Thank's in advance

If you want to move all divs to the left you can just put them in an outer box and move the whole box to the left.
If you want to move only one div you could use css translation because this doesn't influence your layout (it just overlays/underlays the other divs). If you've floating divs and want to move only one specific div it could be tricky to avoid the others from moving also (working with negative margin on the left and positive on the right might work here).

Categories

Resources