Establish a new <section> to serve as a distinct webpage

Question

Establish a new <section> to serve as a distinct webpage

I have a question about creating multiple <section> elements on a page.

I am looking to build an HTML document with several <section> tags, as outlined below.

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

I would like to restrict the user's ability to scroll only until the end of the section1. Once they click on a next button, it should go to section2.

Is there a JavaScript plugin or CSS technique that can achieve this functionality?

Please advise if this question has been asked before.

Thank you.

Addition: I came across a website that exemplifies what I am trying to achieve. The designer includes all the code within one HTML page, but users are only allowed to scroll to the end of each section without immediately transitioning to another section.

javascript jquery html css

Answer 1

Answer №1

One approach you could take is to initially use JavaScript/jQuery to hide the 2nd and 3rd sections. Then, upon clicking the next button, you can reveal section 2 using a similar JS code snippet like this:

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

I have created a simple JSFiddle example for better understanding. Feel free to let me know if this explanation clarifies things or if you require further details.

Answer 2

One approach you could take is to initially use JavaScript/jQuery to hide the 2nd and 3rd sections. Then, upon clicking the next button, you can reveal section 2 using a similar JS code snippet like this:

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

I have created a simple JSFiddle example for better understanding. Feel free to let me know if this explanation clarifies things or if you require further details.

Answer 3

Answer №2

If you want to manipulate the visibility of sections using jQuery, here is a simple solution. Initially, all sections are hidden and only the first section is shown.

Define CSS : section{display:none};

Use jQuery :

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

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

View DEMO

Answer 4

If you want to manipulate the visibility of sections using jQuery, here is a simple solution. Initially, all sections are hidden and only the first section is shown.

Define CSS : section{display:none};

Use jQuery :

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

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

View DEMO

Answer 5

Answer №3

Pure CSS Solution

To achieve the effect of hiding and displaying sections, you can apply a hidden style to the sections and utilize the :target pseudo-class along with a link to #sectionX. This method works well if anchor links are not needed for other purposes. http://jsfiddle.net/p3uqj/

Using JQuery

Alternatively, here is another approach using JQuery: http://jsfiddle.net/z4cx8/

<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<section id="section3">Section 3</section>
<section id="section4">Section 4</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();
      }
    });
});

Answer 6

Pure CSS Solution

To achieve the effect of hiding and displaying sections, you can apply a hidden style to the sections and utilize the :target pseudo-class along with a link to #sectionX. This method works well if anchor links are not needed for other purposes. http://jsfiddle.net/p3uqj/

Using JQuery

Alternatively, here is another approach using JQuery: http://jsfiddle.net/z4cx8/

<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<section id="section3">Section 3</section>
<section id="section4">Section 4</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();
      }
    });
});

Establish a new <section> to serve as a distinct webpage

Answer №1

Answer №2

Answer №3

Pure CSS Solution

Using JQuery

Similar questions

Converting a Base64 URL to an image object: A step-by-step guide

Unable to retrieve JSON data from the remote URL

Need help in setting the default TIME for the p-calendar component in Angular Primeng version 5.2.7?

The Angular ViewportScroller feature appears to be malfunctioning in the latest release of Angular,

Showcasing an item hidden behind text and a dropdown menu

How do I effortlessly resize an image to achieve a pulsating visual effect using JQuery?

preserving the checkbox state using jquery, ajax, and php

Angular error TS2322 arises when attempting to assign a type of 'Observable<{}>' with the share() operator

Showcasing two sets of data from an array using chart.js within a node.js environment

Using NodeJs to pass values to a callback within a condition statement and retrieve the returned value

Launching event handlers and applying CSS classes within a single scenario

Stop text from overflowing when it reaches the maximum width in flexbox

Is there a correct way to properly duplicate a JSON array in Redux?

performing an action using vuex in a component's method

The function you are trying to call is not callable. The type 'Promise<void>' does not have any call signatures. This issue is related to Mongodb and Nodejs

Information from contact forms gets inputted into the URL

NodeJs backend encounters undefined object due to FormData format request sent from Angular frontend

Tips for creating stylish diagonal backgrounds using Bootstrap 5

"Unexpected behavior: datatables.net plugin causing left menu to be hidden behind table in Internet

"multer's single file upload functionality is not functioning properly, but the array upload