0

I have question regarding create <section> as page.

I want to create a HTML with a lot of <section>, below is my concepts.

<html>
    <head>
    </head>
    <body>
        <section id="section1"></section>
        <section id="section2"></section>
        <section id="section3"></section>
    </body>
</html>

enter image description here

I want restrict user only able to scroll until the end of the section1 only.
Until user click on next button just go to section2.

Is there any javascript plugin or css able to do this?

Let me know if this question is duplicated.

Thank you.

Add on: I found a links can describe my question. The designer write all the code inside one HTML page. But we only allow to scroll the until end of the section without going to other section.

http://theme-art.com/quickmetro/

Blackie
  • 53
  • 1
  • 14
  • [jQuery accordion](http://jqueryui.com/accordion/)? – misterManSam Jun 23 '14 at 04:10
  • Actually disabling scrolling is tricky: http://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily – Jon P Jun 23 '14 at 04:25
  • @misterManSam, nope. I want to display section in full page view. I add one image just now. To clarify my question. Thank you so much. – Blackie Jun 23 '14 at 04:44

3 Answers3

2

Initially you could use javascript/jquery to hide the 2nd and 3rd section and on clicking the next button you could unhide section 2 using a js code as such:-

$(document).ready(function() {
    $('#showmenu').click(function() {
            $('.menu').slideToggle("fast");
    });
});

Please refer to a simple jsfiddle i made to understand this better. Do tell me if this clears it up or you need more details?

damien hawks
  • 512
  • 3
  • 17
1

You can try this jQuery. Here I am hiding all sections first and then making next section visible.

CSS : section{display:none};

jQUERY :

$(function(){
 // show first section by default.
 $('#section1').show();
 var currentSection='section1';
 var lastSection = $('[id^=section]:last').attr('id');

    $('#btnNext').click(function(){
        if(currentSection!=lastSection)
        {
        // hide all section for id start with section
            $('[id^=section]').hide();
      var nextSection = $('#'+currentSection).next();
      currentSection = $(nextSection).attr('id');
      $(nextSection).show();
        }
    });
});

DEMO

Bhushan Kawadkar
  • 28,279
  • 5
  • 35
  • 57
1

CSS only

You could style the sections as hidden and use the :target pseudo-class with a link to #sectionX to display it, if you don't need to use anchor links for something else. http://jsfiddle.net/s9aMG/

JQuery

And here is another way of doing it with JQuery http://jsfiddle.net/Gf62N/

<section id="section1">Section1</section>
<section id="section2">Section2</section>
<section id="section3">Section3</section>
<section id="section4">Section4</section>

$(document).ready(function() {
  $('body > section').next().hide();
  $('body > section').append('<div class="next">next</div>');
    $('.next').click(function () {
      if($(this).parent().next().length != 0) {
        $(this).parent().hide();
        $(this).parent().next().show();
      }
    });
});
pandark
  • 313
  • 1
  • 10
  • Nice. Another CSS-only approach is to exploit the :checked pseudo-class. http://jsfiddle.net/u4VDh/ – Alohci Jun 23 '14 at 07:14