jquery show / hide multiple elements by id

click, hide, jquery, show

Solution

I think you are after this one:

$(function(){
    $('p.ui-bottom-article').hide(); // all p hidden here
    $('#page-1').show(); // first of it shown
    $('#rd_bk').hide(); // back btn hidden by default

    $('#rd_more').on('click', function (e) {
        e.preventDefault(); // prevent the default behavior of <a>
        $('p:visible').next('p[id^="page-"]').show().siblings('p').hide(); // show the next of the visible page in this case its page-2 is the next one
        ($('p[id^="page-"]').last().is(':visible')) ? $('#rd_more').hide().addBack('#rd_bk').show() : $('#rd_bk').show(); // show hide the next prev btns
    });

    $('#rd_bk').on('click', function (e) {
        e.preventDefault();
        $('p:visible').prev('p[id^="page-"]').show().siblings('p').hide(); // show the prev hidden div and hide the visible one
        ($('p[id^="page-"]').first().is(':visible')) ? $('#rd_bk').hide().addBack('#rd_more').show() : $('#rd_more').show(); // show hide the next prev btns
    });
});

Updated Fiddle

Problem

I have 3 paragraph and 2 buttons which are next / previous. On initial load the user can only see the first paragraph and a next button, unless he is on paragraph 2 there will be a next and a previous button and only previous button on the final paragraph. This sums what I've done. My code works properly except the back button, but what I'm really after is a cleaner / better way of doing the same thing. My html here: ``` <p id="page-1" class="ui-bottom-article"> blah blah blah 1 <p id="page-2" class="ui-bottom-article"> blah blah blah 2 </p> <p id="page-3" class="ui-bottom-article"> blah blah blah 3 </p> <a id="rd_bk" href="">back</a><a id="rd_more" href="">Read more...</a> ``` my script ``` $(function() { var pageNumber = 1; $('p.ui-bottom-article').hide(); $('#page-1').show(); $('#rd_bk').hide(); $('#rd_more, #rd_bk').click(function(e){ e.preventDefault(); if(pageNumber == 1){ $('p.ui-bottom-article').hide(); $('#page-2').show(); $('#rd_bk').show(); pageNumber++; }else if(pageNumber == 2){ $('p.ui-bottom-article').hide(); $('#page-3').show(); $('#rd_more').hide(); $('#rd_bk').show(); }else if(pageNumber == 3){ $('p.ui-bottom-article').hide(); $('#page-1').show(); $('#rd_more').hide(); pageNumber--; } }//end of if statement );//end of click function }); // end of function ```

Original source