javascript - Show/Hide Content without reloading the page -

javascript - Show/Hide Content without reloading the page -

i have 3 content boxes want show , hide using controls. html follows:

<div id="leermat1"> content here <a class="pag-next">next</a> <a class="pag-prev">previous</a> </div> <div id="leermat2"> content here <a class="pag-next">next</a> <a class="pag-prev">previous</a> </div> <div id="leermat3"> content here <a class="pag-next">next</a> <a class="pag-prev">previous</a> </div>

i have 2 anchors pag-next , pag-prev command of content divs should visible @ given point:

i want write jquery such as, when #leermat1 'pag-next' clicked, hides #leermat1 , shows #leermat2. when #leermat1 hidden , #leermat2 shows, when '.pag-next' clicked, hides #leermat2, , shows #leermat3.

also 'pag-prev' should work same way.

i started next dont know go here.

$(document).ready(function() { $('.pag-next').on('click',function() { $('#leermat1').addclass('hide'); $('#leermat2').addclass('show'); }); });

one more thing '.pag-next' should stop functioning after has shown #leermat3.

you need this

$('[class^=pag-]').click(function() { var elem = $('[id^=leermat]').filter(":visible"); // take visible element var num = number(elem[0].id.match(/\d+$/)[0]); // take number var step = $(this).is('.pag-next') ? 1 : -1; // ternary operator $('#leermat'+ (num + step)).show(); // show next or elem.hide(); // hide visible element });

javascript jquery html ajax