Develop Reference

Scroll top to scroll to the bottom after first click

I want to scroll to the bottom of an element. I searched for solutions here and i got this
but the scrolltop is getting set to zero on first click and if I click on the element again, it scrolls to bottom. I want to scroll to the bottom on first click. The duplicate suggested to me is wrong.
I am using Javascript. Not jquery,
var element = document.querySelector('.message');
element.scrollTop = element.scrollHeight;
.message {
width: 900px;
height: 450px;
margin-top: 0%;
overflow-y: scroll;
}

I have replicated your question and it's working. When I click the first time in the message area the message scrolls to bottom.
Here is the working example:
document.querySelector('.message').addEventListener('click', () => {
var element = document.querySelector('.message');
element.scrollTop = element.scrollHeight;
})
.message {
width: 900px;
height: 100px;
margin-top: 0%;
overflow-y: scroll;
}
<div class="message">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur lorem donec massa sapien faucibus. Lorem ipsum dolor sit amet consectetur adipiscing elit duis. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Diam quam nulla porttitor massa id. Semper viverra nam libero justo laoreet. Dui vivamus arcu felis bibendum ut tristique et. Proin sed libero enim sed faucibus. Consectetur libero id faucibus nisl tincidunt. Arcu felis bibendum ut tristique et egestas quis ipsum. Quisque id diam vel quam. Dui sapien eget mi proin sed. Sit amet luctus venenatis lectus magna fringilla.
Velit dignissim sodales ut eu sem. Malesuada fames ac turpis egestas sed. Tellus orci ac auctor augue mauris augue neque gravida. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Facilisis mauris sit amet massa vitae tortor condimentum. Feugiat nibh sed pulvinar proin. Feugiat in ante metus dictum at tempor commodo ullamcorper a. Laoreet sit amet cursus sit amet. Diam maecenas sed enim ut sem viverra aliquet. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam erat. Sagittis orci a scelerisque purus semper eget duis. In hac habitasse platea dictumst vestibulum rhoncus est pellentesque. Odio tempor orci dapibus ultrices in iaculis. Lacus sed turpis tincidunt id.
Tortor condimentum lacinia quis vel eros donec ac odio tempor. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Luctus accumsan tortor posuere ac. Elementum curabitur vitae nunc sed velit dignissim sodales ut eu. Amet cursus sit amet dictum sit amet justo donec enim. Integer vitae justo eget magna fermentum. Lectus arcu bibendum at varius vel pharetra vel. Diam maecenas ultricies mi eget mauris pharetra et. Id velit ut tortor pretium viverra suspendisse potenti nullam ac. Nullam non nisi est sit amet facilisis magna etiam tempor. Laoreet non curabitur gravida arcu ac tortor. Sed velit dignissim sodales ut eu. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec.
Enim ut sem viverra aliquet. Sit amet cursus sit amet dictum. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Nullam vehicula ipsum a arcu cursus vitae congue mauris rhoncus. In hac habitasse platea dictumst quisque sagittis purus. Libero justo laoreet sit amet cursus sit amet dictum. Nisl vel pretium lectus quam id. Tempor orci dapibus ultrices in iaculis nunc. Turpis egestas pretium aenean pharetra. Sit amet commodo nulla facilisi. Eget est lorem ipsum dolor sit amet consectetur. Sagittis vitae et leo duis ut diam quam. Nulla aliquet enim tortor at auctor urna nunc id cursus. Curabitur vitae nunc sed velit dignissim sodales. Sit amet massa vitae tortor condimentum lacinia quis vel. Id nibh tortor id aliquet lectus proin.
Varius quam quisque id diam vel quam elementum. Felis eget velit aliquet sagittis id consectetur purus ut. Mauris a diam maecenas sed enim ut sem viverra aliquet. Arcu dui vivamus arcu felis. Ac turpis egestas sed tempus urna et. Vel pharetra vel turpis nunc eget lorem. Praesent tristique magna sit amet purus. In ornare quam viverra orci sagittis. Potenti nullam ac tortor vitae purus. Donec ac odio tempor orci dapibus ultrices in.
Varius quam quisque id diam vel quam elementum. Felis eget velit aliquet sagittis id consectetur purus ut. Mauris a diam maecenas sed enim ut sem viverra aliquet. Arcu dui vivamus arcu felis. Ac turpis egestas sed tempus urna et. Vel pharetra vel turpis nunc eget lorem. Praesent tristique magna sit amet purus. In ornare quam viverra orci sagittis. Potenti nullam ac tortor vitae purus. Donec ac odio tempor orci dapibus ultrices in.
Varius quam quisque id diam vel quam elementum. Felis eget velit aliquet sagittis id consectetur purus ut. Mauris a diam maecenas sed enim ut sem viverra aliquet. Arcu dui vivamus arcu felis. Ac turpis egestas sed tempus urna et. Vel pharetra vel turpis nunc eget lorem. Praesent tristique magna sit amet purus. In ornare quam viverra orci sagittis. Potenti nullam ac tortor vitae purus. Donec ac odio tempor orci dapibus ultrices in.
</div>

Sliding text from under image

I need to show txt nicely sliding from under image after click. When user will click on other image, previous text have to slide out (not be vissible).
I am not good in javascript at all. Now I have something like this:
.html
<img src="image.jpg" width="100%" height="100px;">
<div class="slidingDiv">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis auctor quam eget imperdiet. Vestibulum et nibh sit amet lectus mattis rutrum. Nam blandit vel massa eu laoreet. Etiam quam eros, iaculis in ornare viverra, gravida eu justo. Fusce nisi tortor, ornare et metus a, consequat sollicitudin mi. Nulla ipsum erat, ultricies semper ipsum sit amet, aliquet finibus ipsum. Fusce sodales lacus eget quam ullamcorper, mollis rhoncus lectus ullamcorper. Fusce tempor metus vel tincidunt condimentum. Fusce nunc risus, vehicula a cursus sit amet, vestibulum pretium felis. Praesent ex dolor, porta id sollicitudin non, venenatis ut ante. Maecenas porta velit augue, vel suscipit neque commodo et. Aenean ac dolor ac neque tristique porta. Ut neque diam, porta ut diam sit amet, vulputate auctor justo.</div>
</div>
<img src="image.jpg" width="100%" height="100px;">
<div class="slidingDiv">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc venenatis auctor quam eget imperdiet. Vestibulum et nibh sit amet lectus mattis rutrum. Nam blandit vel massa eu laoreet. Etiam quam eros, iaculis in ornare viverra, gravida eu justo. Fusce nisi tortor, ornare et metus a, consequat sollicitudin mi. Nulla ipsum erat, ultricies semper ipsum sit amet, aliquet finibus ipsum. Fusce sodales lacus eget quam ullamcorper, mollis rhoncus lectus ullamcorper. Fusce tempor metus vel tincidunt condimentum. Fusce nunc risus, vehicula a cursus sit amet, vestibulum pretium felis. Praesent ex dolor, porta id sollicitudin non, venenatis ut ante. Maecenas porta velit augue, vel suscipit neque commodo et. Aenean ac dolor ac neque tristique porta. Ut neque diam, porta ut diam sit amet, vulputate auctor justo.</div>
</div>
.js
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function() {
var isvisible = $(this).next('.slidingDiv').is(':visible');
if ( isvisible ) {
$(this).next('.slidingDiv').hide();
} else{
$(this).next('.slidingDiv').show();
}
});
});
https://jsfiddle.net/Elfiszcze/49vd6d6k/2/
Could someone help me with this one?

When using jquery hide() and show() you can set the parameter duration that will be used in animation duration, see jquery docs. For example, 500 miliseconds:
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function() {
//hide all sliding divs
var arrayLikeOfSlidingDivs = $('.slidingDiv');
arrayLikeOfSlidingDivs.each(function(){
if ($(this).is(':visible')){
$(this).hide(500);
}
});
var isvisible = $(this).next('.slidingDiv').is(':visible');
if ( isvisible ) {
$(this).next('.slidingDiv').hide(500);
} else{
$(this).next('.slidingDiv').show(500);
}
});
});

how to dynamically change data based on JSON file using jQuery

<div id="rightside">
<h1>Name Of Person</h1>
<p>1900-1950
<p>Learn More
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at
convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
<p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
<button>Pause</button>
</div>
my div looks like this. I want to replace it with data that I am getting from a JSON file. However I only want to show 1 entry at a time and make it animate between entries (does not need to be fancy).
My question is how can I get jQuery to change between my JSON data?
My JSON data looks like
[
{
"name": "Elizabeth Cady Stanton",
"image": "media/images/elizabeth.jpg",
"year": "1815 – 1902",
"wikilink": "https://en.wikipedia.org/wiki/Elizabeth_Cady_Stanton",
"article": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor. Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nil."
},
I would appreciate any help or links to examples.
Thanks

Added data-index to track data index that we are showing
<div id="rightside" data-index='-1'>..</div>
It will change your data after every 5 seconds in rotating manner.
setTimeout(function(){
var yourJsonData = [{"name":"Elizabeth Cady Stanton","image":""media/images/elizabeth.jpg"},{"name":"Elizabeth Cady Stanton","image":""media/images/elizabeth.jpg"}];
var currentIndex = $("#rightside").attr('data-index');
var totalLengthOfData = yourJsonData.length;
var indexToShow = currentIndex+1;
if(indexToShow > totalLengthOfData){
indexToShow=0;
}
$("#rightside").attr('data-index',indexToShow);
var dataToAppend = yourJsonData[indexToShow];
$("#rightside").children().remove();
$("#rightside").append("<h1>"+yourJsonData['name']+"</h1>").
append("<p>"+yourJsonData['year']+"</p><p><a href='"+yourJsonData['linktowiki']+"'>learn more</a></p>");
},5000);
haven't tested the code yet

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
var yourJsonData = '[{"name": "Elizabeth Cady Stanton","image": "media/images/elizabeth.jpg","year": "1815 – 1902","wikilink": "https://en.wikipedia.org/wiki/Elizabeth_Cady_Stanton", "article": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor. Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nil."}]'
var obj = JSON.parse(yourJsonData);
$('#rightside').find('h1:first').text(obj[0].name);
$('#rightside').find('p:first').text(obj[0].year);
$('#rightside').find('a:first').attr('href', obj[0].wikilink)
$('#rightside').find('p:eq(3)').text(obj[0].article)
});
</script>
<body>
<div id="rightside">
<h1>Name Of Person</h1>
<p>1900-1950
<p>Learn More
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at
convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
<p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
<button>Pause</button>
</div>
</body>
</html>

Your problem can be solved by this:
HTML:
<div id="rightside">
<h1 id="nameOfPerson"></h1>
<p id="year">
</p>
<a id="wikiLink">Learn More</a>
<p id="article"></p>
<p></p>
<button id="fill">Start</button>
</div>
JQuery :
var dataObject = [{
"name": "Elizabeth Cady Stanton",
"image": "media/images/elizabeth.jpg",
"year": "1815 – 1902",
"wikilink": "https://en.wikipedia.org/wiki/Elizabeth_Cady_Stanton",
"article": "Whole Article"
}];
$("#fill").click(function() {
setData(dataObject);
});
var setData = function(data) {
$.each(data, function(index, mainData) {
$("#nameOfPerson").text(mainData.name);
$("#year").text(mainData.year);
$("#wikiLink").attr("href",mainData.wikilink);
$("#article").text(mainData.article)
});
};
By this code your data will be rendered dynamically.
For Demo you can check my fiddle :
Fiddle Link Here

How to div scroll

<div class="btn-toggle">
<div class="description ">
<div class="Area" style="height: auto; visibility: visible; overflow: hidden;">
<div class="scrollbar" style="height: 340px;">
<div class="watch" style="height: 340px;">
<div class="round" style="height: 100px; top: 0px;"></div>
</div>
</div>
While running selenium code, need to scroll to the bottom of the div. How do update "style =height: 100px; top: 100px;".
How to accomplish this using Javascript?

Sorry there was little confusion ,but not not now. check out fiddle .See style properly.
Working fiddle
Use the following code , say you want to scroll to bottom of "round" div,
var scr = $('#box')[0].scrollHeight;
$('#box').animate({scrollTop: scr},2000);
CSS :
#box{
overflow:auto;
width:300px;
height:200px;
}
Say HTML is
<div id="box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non tellus nisi, at euismod lacus. Praesent elementum, purus vitae imperdiet bibendum, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra nem, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra nem, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra nem, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra nem, erat nisl congue libero, vitae bibendum diam quam sed orci. Integer magna justo, dapibus et sagittis et, porta sit amet augue. Ut sed felis et odio egestas sodales eget vel sapien. Vivamus laoreet fermentum odio, eu fringilla nisi pulvinar at. Cras quis mauris erat, et varius massa. Aenean sit amet consequat purus. Aenean at lectus sem.
Donec lobortis pulvinar ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae turpis massa, quis vehicula mauris. Fusce in ante libero. Aliquam consectetur suscipit dui eu vestibulum. Aenean felis purus, volutpat et sollicitudin at, feugiat non odio. Sed feugiat, augue non volutpat congue, ipsum magna vehicula dolor, non ornare mi mauris nec ipsum. Integer sed odio eget nisl posuere porttitor vitae suscipit lectus. Cras vehicula, justo nec ornare rhoncus, enim urna euismod justo, quis scelerisque metus dolor at leo.
Maecenas non elit sapien. Proin fringilla pellentesque ultrices. Proin rhoncus eleifend nisl, nec consequat dui porta id. Aliquam ut erat libero. Integer at tristique est. Duis iaculis, augue vel tempus congue, elit mi pellentesque felis, ut interdum risus tortor vitae nulla. Praesent malesuada mattis fermentum. Donec luctus pharetra neque, non dignissim sem condimentum vitae. Quisque varius nibh nec felis facilisis nec consectetur augue ultrices.
Nullam ut arcu nisi, eu volutpat neque. Etiam lobortis, erat vel mollis aliquam, sapien eros bibendum erat, vel mollis purus neque sit amet quam. Proin semper aliquet leo. Morbi erat ipsum, vehicula eget mattis sed, venenatis in lectus. Cras quis dui nunc. Vestibulum viverra tempus nisl pulvinar tempor. Donec vitae nunc quam, eu placerat nulla. Suspendisse potenti. Nulla ante dolor, varius eget porttitor eu, malesuada vel nisl. Vestibulum in justo eros. Maecenas id lorem metus, et auctor nibh. Maecenas ut porttitor felis.
Praesent blandit elementum fringilla. Curabitur tincidunt, libero in convallis volutpat, enim purus sodales lacus, vel euismod ante erat nec est. Nam non metus quis lorem ornare dictum sit amet et mauris. Curabitur molestie porta tortor vel adipiscing. Pellentesque sed nulla vel neque tempor sodales. Aliquam erat volutpat. Nullam nisl mauris, faucibus at blandit mollis, malesuada eu risus. Nunc urna lacus, egestas et euismod non, vehicula sed ligula.
</div>

Output javascript array in a list item, then clicking on either of them will show a whole item in another dic

So I have to finish a task, and I'm a total javascript/jquery newb!
My problem is this:
We need to have several list items, outputed from a javascript. The list itsm contains only the tile.
Then when the use clicks on either of those list items, the full info appears somewhere else on the page, with more details.
I have to work with this:
var data={
"news":[
{
"id":"0",
"title":"Find the best deals",
"sub":"Featured Story",
"text":"0 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.",
"image":"images\/home_img_4.jpg",
"link":"#NEWS_0",
},
{
"id":"1",
"title":"No one likes the grudge",
"sub":"Featured Story 1",
"text":"1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.",
"image":"images\/home_img_4.jpg",
"link":"#NEWS_1",
},
{
"id":"2",
"title":"Story time is on!",
"sub":"Featured Story2",
"text":"2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.",
"image":"images\/home_img_4.jpg",
"link":"#NEWS_2",
},
]
}
Also heres a better example for what im looking for:
jsfindle
Thanks!
George

When populating the UL list add an attribute "data-item" to the LI(s),
give it the value of the index of that item in the data array.
<ul class="mini-feed">
<li class="title" data-item="0">Test title</li>
<li class="title" data-item="1">Test title 1</li>
<li class="title" data-item="2">Test title 2</li>
<li class="title" data-item="3">Test title 3</li>
<li class="title" data-item="4">Test title 4</li>
</ul>
also give the elements in the display section IDs:
<div class="">
<img id="image" src="" class="image" />
<h1 id="title" class="title">Test title</h1>
<span id="body" class="sub">some tagline</span>
</div>
then add the following javascript (considering you are using jQuery)
$(document).ready(function(){
$('.title').click(function(){
var itemIndex = $(this).data('item');
popItemToScreen(data.news[itemIndex]);
});
});
function popItemToScreen(dataItem){
$('#image').src = dataItem.image;
$('#title').html(dataItem.title);
$('#body').html(dataItem.text);
}
this should do the trick

Fiddle: http://jsfiddle.net/j9QEM/11/
<ul id="mylist">
<li data-id="0">Title 1</li>
<li data-id="1">Title 2</li>
<li data-id="2">Title 3</li>
</ul>
<div id="content"></div>
<script>
/**
* get the data-index="" value and
* use it's id as an index to pick
* a particular item from the data[] array
*
* .html() populates #content with the given
* .text.
**/
$('#mylist li').on('click', function() {
$('#content').html( data.news[$(this).data('id')].text );
});
</script>
Within your comments, you mentioned about loading the page with Id in mind, you could after page load:
<script>
$(document).ready(function() {
//This will pre-load the Array's 3rd news piece.
$('#content').html( data.news[2].text );
});
</script>