I'm having trouble getting something like this to work. I've got a series of DIVS (1 through 8) and when you hover over one div, I want to literally change the contents of one of the other divs with the contents of #replace (which is current set to hidden)
<div id="replace" style="visibility:hidden;">Bla Bla Bla</div>
Here is what I've got so far:
$('#1').on({
mouseover: function(){
$('#2').replaceWith(jQuery('#replace'));
},
mouseleave: function(){
$('#2').replaceWith(jQuery('#2'));
},
click: function(){
$('#2').replaceWith(jQuery('#replace'));
$('#1').off('mouseleave mouseover');
}
});
Not really having an effect at all - so is my logic bad, how i'm doing it bad, etc...?
jsBin demo
<div class="box">This is DIV #1 :) </div>
Add a class .box to all your 8 elements and do:
jQuery(function($){
var replaceText = $('#replace').text();
var memorizeText = '';
$('.box').on({
mouseenter: function(){
memorizeText = $(this).next('.box').text(); // memorize text
$(this).next('.box').text(replaceText);
},
mouseleave: function(){
$(this).next('.box').text( memorizeText ); // restore memorized text
},
click: function(){
$(this).next('.box').text( replaceText );
$(this).off('mouseleave mouseenter');
}
});
});
Like this?
<div class="page">
<div class="content">Bla bla bla</div>
</div>
<div class="page">
<div class="content">Some more text</div>
<div class="content-alt" style="display: none;">I like fish</div>
</div>
<div class="page">
<div class="content">Hello there</div>
<div class="content-alt" style="display: none;">Test 123</div>
</div>
<div class="page">
<div class="content">Test</div>
<div class="content-alt" style="display: none;">Hi!</div>
</div>
JS
$('.page').on({
mouseover: function(){
var nextPage = $(this).next('.page');
nextPage.children('.content').hide();
nextPage.children('.content-alt').show();
},
mouseleave: function(){
var nextPage = $(this).next('.page');
nextPage.children('.content').show();
nextPage.children('.content-alt').hide();
}
});
Original answer
If I understand your question correctly, you can try this:
HTML
<div id="page1"><div class="name">Page 1</div></div>
<div id="page2"><div class="name">Page 2</div></div>
<div id="page3"><div class="name">Page 3</div></div>
<div id="hidden" style="display: none">This is some hidden text</div>
JS
$('#page1').on({
mouseover: function(){
$('#page2 .name').hide().after($('#replace'));
},
mouseleave: function(){
$('#hidden').hide();
$('#page2 .name').show();
},
click: function(){
$('#hidden').hide();
$('#page2 .name').show();
$('#1').off('mouseleave mouseover');
}
});
But I'm not really sure why you are trying to do this. Are you just trying to show and hide some text on mouse over?
Don't have a lot of data on what your HTML structure looks like, the purpose of this, etc. But the following is an example structure that would achieve what you're question refers to -- and it's a bit shorter as writing out a specific handling for every div when they all do the same thing makes it a bit unnecessarily long. Code is below, working example also in this jsfiddle
HTML
<div id="1" class="replace-me">DIV 1</div>
<div id="2" class="replace-me">DIV 2</div>
<div id="3" class="replace-me">DIV 3</div>
<div id="4" class="replace-me">DIV 4</div>
<div id="5" class="replace-me">DIV 5</div>
<div id="6" class="replace-me">DIV 6</div>
<div id="7" class="replace-me">DIV 7</div>
<div id="8" class="replace-me">DIV 8</div>
<div id="replacementText">REPLACEMENT TEXT</div>
CSS
#replacementText {
visibility: hidden;
}
JQuery
$('.replace-me').mouseover(function() {
$(this).text($('#replacementText').text());
});
$('.replace-me').mouseout(function() {
$(this).text("DIV "+$(this).attr('id'));
});
Related
I am trying to close an accordion on the next click after opening an accordion item. Given the current way that I have it set up (below), what would be the best approach to accomplishing this? My code is the following:
HTML:
<div class="faq-accordion">
<section id="1">
<h4>Accordion Title</h4>
<div>
<p>Accordion Content</p>
</div>
</section>
</div>
Javascript:
$(document).ready(function(){
$('.faq-accordion h4').click(function(){
if( $(this).next().is(':hidden') ) {
$('.faq-accordion h4').removeClass('faq-active').next().slideUp();
$(this).addClass('faq-active').next().slideDown();
}
return false;
});
});
You can do it this way:
(function($) {
var accordions = $('.accordion .content').hide();
$('.accordion .header > a').click(function() {
accordions.slideUp();
if($(this).parent().next().is(':visible')) {
$(this).parent().next().slideUp();
} else {
$(this).parent().next().slideDown();
}
return false;
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
<div class="header">Accordion title 1</div>
<div class="content">Content 1</div>
<div class="header">Accordion title 2</div>
<div class="content">Content 2</div>
<div class="header">Accordion title 3</div>
<div class="content">Content 3</div>
</div>
Let me know if you have any questions.
I hope it helps.
I have some tabs set up with jQuery, but I would like to add the capability to change tabs based on URL. Ideally, once the URL is followed by the id/data-attribute, the browser scrolls to the appropriate section and the tab gets open.
$(document).ready(function(){
$('.gdlr-session-item-head-info').click(function(){
if( $(this).hasClass('gdlr-active') ) return;
$(".gdlr-session-item-head-info").removeClass('gdlr-active');
$('html, body').animate({
scrollTop: $(".gdlr-tab-session-item").offset().top-200
}, 1000);
var selected_tab = $(this).attr('data-tab');
var current_day = $(this).attr('current-day');
$(".currentDay-"+current_day).addClass('gdlr-active');
$('.gdlr-session-item-head').siblings('.gdlr-session-item-tab-content').hide();
$('.gdlr-session-item-head').siblings('.' + selected_tab).fadeIn();
});
}
HMTL
<div class="session-item-wrapper" id="agendaroduct" style="margin-bottom: 10px;">
<div class="gdlr-session-item gdlr-tab-session-item gdlr-item">
<div class="gdlr-session-item-head">
<a href="agenda/#currentDay-1">
<div id="currentDay-1" class="gdlr-session-item-head-info currentDay-0 gdlr-active" current-day="0" data-tab="gdlr-tab-1">
<div class="gdlr-session-head-day">Pre-Day</div>
<div class="gdlr-session-head-date">Tue, Nov 5</div>
</div>
</a>
<a href="agenda/#currentDay-2">
<div id="currentDay-2" class="gdlr-session-item-head-info currentDay-1" current-day="1" data-tab="gdlr-tab-2">
<div class="gdlr-session-head-day">Day 1</div>
<div class="gdlr-session-head-date">Wed, Nov 6</div>
</div>
</a>
<a href="agenda/#currentDay-3">
<div id="currentDay-3" class="gdlr-session-item-head-info currentDay-2" current-day="2" data-tab="gdlr-tab-3">
<div class="gdlr-session-head-day">Day 2</div>
<div class="gdlr-session-head-date">Thu, Nov 7</div>
</div>
</a>
<div class="clear"></div>
</div>
<div>
<div class="clear"></div>
</div>
<div class="gdlr-session-item-tab-content gdlr-tab-1 " style="display: block;"> content goes here
</div>
<div class="gdlr-session-item-tab-content gdlr-tab-2 gdlr-active" style="display: none;"> content goes here
</div>
<div class="gdlr-session-item-tab-content gdlr-tab-3 " style="display: none;"> conten goes here
</div>
<div class="gdlr-session-item-head end">
<div class="gdlr-session-item-head-info currentDay-0 gdlr-active" current-day="0" data-tab="gdlr-tab-1">
<div class="gdlr-session-head-day">Pre-Day</div>
<div class="gdlr-session-head-date">Tue, Nov 5</div>
</div>
<div class="gdlr-session-item-head-info currentDay-1" current-day="1" data-tab="gdlr-tab-2">
<div class="gdlr-session-head-day">Day 1</div>
<div class="gdlr-session-head-date">Wed, Nov 6</div>
</div>
<div class="gdlr-session-item-head-info currentDay-2" current-day="2" data-tab="gdlr-tab-3">
<div class="gdlr-session-head-day">Day 2</div>
<div class="gdlr-session-head-date">Thu, Nov 7</div>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
Any help would be very much appreciate it.
Thanks!
You'll want to find a method of connecting the hash value to a DOM element. In your case, your id attribute on your tab triggers match this and also contain the relevant information to show the correct tabs amongst other functionality (as you've demonstrated in your click event).
You could separate your tab change logic into a function which can then be called by both click events and on page load by passing the intended tab to show as a parameter.
function showTab(element) {
if (element.hasClass("gdlr-active")) return;
$(".gdlr-session-item-head-info").removeClass("gdlr-active");
$("html, body").animate({
scrollTop: $(".gdlr-tab-session-item").offset().top - 200
}, 1000);
var selected_tab = element.attr("data-tab");
var current_day = element.attr("current-day");
$(".currentDay-" + current_day).addClass("gdlr-active");
$('.gdlr-session-item-head').siblings(".gdlr-session-item-tab-content").hide();
$('.gdlr-session-item-head').siblings("." + selected_tab).fadeIn();
}
Your click handler would then be bound to call the function...
$('.gdlr-session-item-head-info').click(function(){
showTab($(this));
})
When the page loads, you could verify the hash in the URL is an available DOM element and send that to your function also.
$(document).ready(function () {
if (window.location.hash) {
var targetTab = $(window.location.hash)
if (targetTab.length) {
showTab(targetTab);
}
}
})
So I have this
<div class="btns">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
<div class="btn4"></div>
</div>
<div class="prevs">
<div class="pre1"></div>
<div class="pre2"></div>
<div class="pre3"></div>
<div class="pre4"></div>
</div>
http://jsfiddle.net/uzpxjukv/
You have btn1, btn2, btn3 and btn4. I'm trying to make it so that when you press btn1, the div with the class pre1 should then get "display: block;" or something to make it visible. Then when btn2 is clicked, pre1 turns invisible again and pre2 turns visible.
Maybe something like this? If there will be more buttons, it should be more optimalized.
$('.btns').find('div').click(function(){
$('.prevs').find('div').eq($(this).index()).toggle();
});
$('.btns').find('div').click(function(){
$('.prevs').find('div').eq($(this).index()).toggle();
});
.prevs div:not(.pre1) {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
<div class="btn1">Button 1</div>
<div class="btn2">Button 2</div>
<div class="btn3">Button 3</div>
<div class="btn4">Button 4</div>
</div>
<div class="prevs">
<div class="pre1">Previews 1</div>
<div class="pre2">Previews 2</div>
<div class="pre3">Previews 3</div>
<div class="pre4">Previews 4</div>
</div>
JSFIDDLE DEMO -> http://jsfiddle.net/uzpxjukv/5/
$('.btns div').click(function() {
var classNumber = this.className.slice(-1);
$('.prevs div').hide();
$('.pre' + classNumber).show();
});
On click of the button div, first hide all the pre divs and then show only the relevant div.
Try it
$('.btns > div').on('click', function() {
var numberOfDiv = $(this).attr('class').slice('-1'),
prevs = $('.prevs');
prevs.find('> div').hide();
prevs.find('.pre' + numberOfDiv).show();
});
This example is with your html code, if is possible to change it, you can get a better code.
See the fiddle
I have changed your HTML a little bit..Changed the class attribute of the prevs divsti ids.
HTML
<div class="btns">
<div class="btn1" id="1" onClick="reply_click(this.id)"></div>
<div class="btn2" id="2" onClick="reply_click(this.id)"></div>
<div class="btn3" id="3" onClick="reply_click(this.id)"></div>
<div class="btn4" id="4" onClick="reply_click(this.id)"></div>
</div>
<div class="prevs">
<div id="pre1"></div>
<div id="pre2"></div>
<div id="pre3"></div>
<div id="pre4"></div>
</div>
JS
function reply_click(id) {
document.getElementById("pre" + id).style.display = "block";
}
Provided that you know what naming system the divs use, you could use something along these lines. (To see properly working, view using developer tool)
$('.btns div').on('click', function() {
var currClass = $(this).attr('class').slice(-1); //get end of number of div clicked
$('.prevs div').css('display', 'none'); //reset all divs to being hidden
$('.pre' + currClass).css('display', 'inline-block'); //show desired div
});
.btns div {
background-color: gray;
}
.btns div, .prevs div {
width: 2em;
height: 2em;
display: inline-block;
padding-right: 0.2em;
}
.prevs div {
background-color: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btns">
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
<div class="btn4"></div>
</div>
<div class="prevs">
<div class="pre1"></div>
<div class="pre2"></div>
<div class="pre3"></div>
<div class="pre4"></div>
</div>
ok, So I have multiple divs(7) which I want to toggle for show hide. If one div is open rest should hide and when I open a new div the others should hide. I have been able to accomplish this with the below piece of jquery
function showDivs() {
$(".head").click(function() {
$(".Content").hide();
$(this).next().fadeIn("slow");
})
}
where .head is the header for each div and .Content is the class for divs. I have got it working perfectly, by calling showDivs() from .head() Now the question is that on the left hand side of my page, I have ul li set. I have 7 li items, that correspond to 7 divs. I mean on click of first li the corresponding div should open up and the others should hide, and on click of 2nd li the 2nd div should open up and the others hide.
Does anybody have an idea how to make these divs show hide on the action of li items on left. I know I have to pass parameters for showDivs(), but don't know how?
help is appreciated
I believe this is where .index() comes into play:
$(function() {
$('ul li').each(function() {
$(this).click(function(e) {
var i = $(this).index();
$('div').hide();
$('div:eq('+i+')').show();
});
});
});
That's a pretty basic markup but I'm sure you can work out how to get it working with your code. Hope I helped!
http://jsfiddle.net/Z3Hj7/
EDIT: After having seen your fiddle I think i worked out exactly what you want:
$(function() {
$('ul li').each(function() {
$(this).click(function(e){
e.preventDefault();
var i = $(this).index();
$('.content').hide();
$('.head:eq('+i+')').next().show();
});
});
});
Take a look at the fiddle: http://jsfiddle.net/DTcGD/25/
If I understand your HTML structure correctly, it looks about like this:
<!-- The list... -->
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<!-- The divs -- note I've assumed there's a container... -->
<div id="container">
<div class="head">Header One</div>
<div class="Content">Content One</div>
<div class="head">Header Two</div>
<div class="Content">Content Two</div>
<div class="head">Header Three</div>
<div class="Content">Content Three</div>
<div class="head">Header Four</div>
<div class="Content">Content Four</div>
</div>
...only with seven items rather than four.
If so, this would do it (live copy):
jQuery(function($) {
$(".Content").hide();
$("li").click(function() {
showDivs($("#container div.head:eq(" + $(this).index() + ")"));
});
$(".head").click(function() {
showDivs($(this));
});
function showDivs(head) {
$(".Content").hide();
head.next().fadeIn("slow");
}
});
There, I'm relating the list to the headers implicitly, by where they are in their container. So the first li relates to the first div with class="head", the second to the second, etc. I'm doing that by using index to know which li was clicked, and then looking up the related div.head using :eq.
Doing it structurally rather than with id values makes it much easier to maintain. Alternately, though, you could do it by giving each li a data-div attribute with the value of the id of the related div:
<ul>
<li data-div="h1">One</li>
<li data-div="h2">Two</li>
<li data-div="h3">Three</li>
<li data-div="h4">Four</li>
</ul>
<div id="container">
<div id="h1" class="head">Header One</div>
<div class="Content">Content One</div>
<div id="h2" class="head">Header Two</div>
<div class="Content">Content Two</div>
<div id="h3" class="head">Header Three</div>
<div class="Content">Content Three</div>
<div id="h4" class="head">Header Four</div>
<div class="Content">Content Four</div>
</div>
Then (live copy):
jQuery(function($) {
$(".Content").hide();
$("li").click(function() {
showDivs($("#" + $(this).attr("data-div")));
});
$(".head").click(function() {
showDivs($(this));
});
function showDivs(head) {
$(".Content").hide();
head.next().fadeIn("slow");
}
});
data-* attributes are valid as of HTML5, but all browsers support them right now. (The data-* thing is an attempt to codify and reign in people's use of invalid attributes, by giving them a valid way to do it without conflicting with future additions to the spec.)
How about asigning an id to each list item and a corosponding id to each item container. So your list items get an id of "item01".."item07" and your content containers gets id of "item01c".."item07c". Then you can do somehing like this:
$("li").click(function() {
showDivs($(this).attr("id"));
})
function showDivs(callerId) {
$(".content").hide();
$(".content", "#" + callerId + "c").fadeIn();
}
Working example can be seen here: http://jsfiddle.net/ECbkd/5/1
If you want to use .index() as suggested by someone earlier, then I belive this would be the simplest approach (check it out here http://jsfiddle.net/ECbkd/7/):
$("li").click(function() {
$(".content").hide();
$('.item').eq($(this).index()).children('.content').fadeIn();
})
You could add this to be able to show content when clickin on header also:
$("h2", ".container").click(function() {
$(".content").hide();
$(this).parent().children('.content').fadeIn();
})
* EDIT START *
To let content toggle on click at header use this:
$("h2", ".container").click(function() {
$(".content").not($(this).parent().children('.content')).hide();
$(this).parent().children('.content').toggle();
})
Updated code here
http://jsfiddle.net/ECbkd/8/
* EDIT END *
This is based on html like this:
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
</ul>
<div class='container'>
<div class='item'>
<h2>Header 1</h2>
<div class='content'>Content 1</div>
</div>
<div class='item'>
<h2>Header 2</h2>
<div class='content'>Content 2</div>
</div>
<div class='item'>
<h2>Header 3</h2>
<div class='content'>Content 3</div>
</div>
<div class='item'>
<h2>Header 4</h2>
<div class='content'>Content 4</div>
</div>
<div class='item'>
<h2>Header 5</h2>
<div class='content'>Content 5</div>
</div>
<div class='item'>
<h2>Header 6</h2>
<div class='content'>Content 6</div>
</div>
<div class='item'>
<h2>Header 7</h2>
<div class='content'>Content 7</div>
</div>
</div>
you can show and hide multiple divs by using this simple method
function w3_open() {
document.getElementById("id01").style.display =
"block"; document.getElementById("id02").style.display = "block"
}
make sure that you are using w3.css
<button onclick="w3_open()" class="w3-button w3-opacity w3-black">Yesterday</button>
<div id="id01" class="w3-panel w3-white w3-card w3-display-container">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<p class="w3-text-blue"><b>email.zip</b></p>
<p>https://www.w3schools.com/lib/email.zip</p>
<p class="w3-text-blue">Show in folder</p>
</div>
<div id="id02" class="test w3-panel w3-white w3-card w3-display-
container">
<span onclick="document.getElementById('id02').style.display='none'"
class="w3-button w3-display-topright">×</span>
<p class="w3-text-blue"><b>email.zip</b></p>
<p>https://www.w3schools.com/lib/email.zip</p>
<p class="w3-text-blue">Show in folder</p>
</div>
If you give the li's and the corresponding divs the same class, then you can say something like
function showDivs() {
$("li").click(function() {
$(".Content").hide();
clickedID = $(this).attr("class");
$('div#'+clickedID).fadeIn("slow");
})
}
I'm using javascript to build a list of results. I have a for-loop that iterates over some data and creates a mydata div, and adds that to the results div. Let's pretend it looks something like this:
<div id="results">
<div class="mydata">data 1</div>
<div class="mydata">data 2</div>
...
<div class="mydata">data 20</div>
</div>
What I want to do is only display 5 results at a time, and should the user wish to see more, they can click a show next 5 or show more button (or something similar). Any ideas?
Just to clarify, every time the user clicks "show more" I want to 'unhide' the next 5 elements, not ALL the remaining elements. So each click reveals more elements until all are displayed.
You can use the gt() and lt() selectors along with :visible pretty well here.
The following will show the next 5 results on clicking and removes the link once all items are visible.
$('.mydata:gt(4)').hide().last().after(
$('<a />').attr('href','#').text('Show more').click(function(){
var a = this;
$('.mydata:not(:visible):lt(5)').fadeIn(function(){
if ($('.mydata:not(:visible)').length == 0) $(a).remove();
}); return false;
})
);
working example: http://jsfiddle.net/niklasvh/nTv7D/
Regardless of what other people are suggesting here, I would not hide the elements using CSS, but do it in JS instead, because if a user has JS disabled and you hide the elements using CSS, he won't get them visible. However, if he has JS disabled, they will never get hidden, nor will that button appear etc, so it has a full noscript fallback in place + search engines don't like hidden content (but they won't know its hidden if you do it on DOM load).
My solution is here: jsFiddle.
You can put this link somewhere:
show more
and use the following code:
var limit = 5;
var per_page = 5;
jQuery('#results > div.mydata:gt('+(limit-1)+')').hide();
if (jQuery('#results > div.mydata').length <= limit) {
jQuery('#results-show-more').hide();
};
jQuery('#results-show-more').bind('click', function(event){
event.preventDefault();
limit += per_page;
jQuery('#results > div.mydata:lt('+(limit)+')').show();
if (jQuery('#results > div.mydata').length <= limit) {
jQuery(this).hide();
}
});
where limit is your current number of results displayed and per_page is number of results shown with each click on "show more". The link disappears if all the results are displayed. See how it works on jsFiddle.
You can create a CSS class like:
.hiddenData { display: none }
and attach it to any quantity of divs that exceeds 5.
After that make handlers for adding/deleting this class from the needed quantity of divs.
jQuery for class removing:
$(".hiddenData").removeClass("hiddenData")
Create a class with something like:
.hidden_class{
display: none;
}
Add this class to all the mydata div's that you dont want seen.
when the user click the button, remove it from the next 5 div's.
repeat everytime the user clicks the "read more" button
This should work...Let me know how it goes
<script type="text/javascript">
function ShowHide(id) { $("#" + id).toggle(); }
</script>
<div id="results">
<div class="mydata">data 1</div>
<div class="mydata">data 2</div>
<div class="mydata">data 3</div>
<div class="mydata">data 4</div>
<div class="mydata">data 5</div>
<div style="clear:both" onclick="ShowHide('grp6')">More</div>
<div id="grp6" style="display:none">
<div class="mydata">data 6</div>
<div class="mydata">data 7</div>
<div class="mydata">data 8</div>
<div class="mydata">data 9</div>
<div class="mydata">data 10</div>
</div>
<div style="clear:both" onclick="ShowHide('grp11')">More</div>
<div id="grp11" style="display:none">
<div class="mydata">data 11</div>
<div class="mydata">data 12</div>
<div class="mydata">data 13</div>
<div class="mydata">data 14</div>
<div class="mydata">data 15</div>
</div>
</div>
In your forloop, you also have to add these divs hidden container
<div style="clear:both" onclick="ShowHide('grp6')">More</div>
<div id="grp6" style="display:none">
You get the idea.
Here you have:
<style>
/*This hides all items initially*/
.mydata{
display: none;
}
</style>
Now the script
<script>
var currentPage = 1; //Global var that stores the current page
var itemsPerPage = 5;
//This function shows a specific 'page'
function showPage(page){
$("#results .mydata").each(function(i, elem){
if(i >= (page-1)*itemsPerPage && i < page*itemsPerPage) //If item is in page, show it
$(this).show();
else
$(this).hide();
});
$("#currentPage").text(currentPage);
}
$(document).ready(function(){
showPage(currentPage);
$("#next").click(function(){
showPage(++currentPage);
});
$("#prev").click(function(){
showPage(--currentPage);
});
});
</script>
And a sample html:
<div id="results">
<div class="mydata">data 1</div>
<div class="mydata">data 2</div>
<div class="mydata">data 3</div>
<div class="mydata">data 4</div>
<div class="mydata">data 5</div>
<div class="mydata">data 6</div>
<div class="mydata">data 7</div>
<div class="mydata">data 8</div>
<div class="mydata">data 9</div>
<div class="mydata">data 10</div>
<div class="mydata">data 11</div>
<div class="mydata">data 12</div>
</div>
Previous
<span id="currentPage"></span>
Next
The only thing remaining is to validate fot not going to a page lower than 1 and higher than the total. But that will be easy.
EDIT: Here you have it running: http://jsfiddle.net/U8Q4Z/
Hope this helps. Cheers.