Text Divider Display

INFORMATION & CODE

Text Divider Display

What This Code Does

This code provides an interactive web component designed to showcase different styles of text dividers (solid, dashed, and dotted) inside a structured content container. It serves as a visual utility or UI component demo where users can click between different buttons to toggle and preview specific divider styles embedded within sample paragraphs.

How This Code Works

The application works through a combination of HTML structure, CSS styling, and JavaScript interactivity. The HTML file sets up a navigation area containing three buttons ("Default", "Dashed", and "Dotted") and a main container (divider_page) filled with text and three different <fieldset> elements. These fieldsets use <legend> tags to create centered text labels that sit directly on top of horizontal divider lines.

The CSS handles the layout and visual presentation, ensuring that the main content container and the individual divider lines are hidden by default using display: none. It utilizes an .active modifier class to reveal the main page container and the specific divider style requested by the user. Additionally, it styles the buttons with a light blue background and underlines, and centers the text elements to give the interface a clean, modern look.

The JavaScript file brings the interface to life by adding click event listeners to each of the navigation buttons. When a user clicks a button, the script removes the active state from all dividers, ensures the parent page container is displayed, and then applies the .active class exclusively to the corresponding divider (solid, dashed, or dotted) based on the button's index.

How to Use This Code

To use this code in a project, you simply need to split the provided snippets into three separate files— index.html, styles.css, and scripts.js—and place them in the same directory, making sure the HTML file correctly links to the stylesheet and script. You can then integrate the .divider_page HTML structure and the associated CSS rules into any existing webpage where you want to provide customizable or styled section breaks within your content.

HTML


                <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Divider</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="link_box">
      <button class="linkbtn">Default »</button>
      <button class="linkbtn">Dashed »</button>
      <button class="linkbtn">Dotted »</button>
    </div>
          
    <div class="divider_page">
      <h2>Text Divider</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
        irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur.
      </p>
      <fieldset class="solid">
        <legend>Text Seperator</legend>
      </fieldset>
      <fieldset class="dashed">
        <legend>Text Seperator</legend>
      </fieldset>
      <fieldset class="dotted">
        <legend>Text Seperator</legend>
      </fieldset>
      <p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et
        eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur
        eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
        molestiae voluptatibus.
      </p>
    </div>
    <script src="scripts.js"></script>
  </body>
</html>

CSS


                      .link_box{
        position: relative;
        top: 30px;
        left: 50%;
        transform: translatex(-50%);
        width: 480px;
        margin-bottom: 60px;
      }
      
      .linkbtn {
        position: relative;
        top: 17px;
        left: 0;
        -webkit-text-decoration: underline;
        text-decoration: underline;
        padding: 10px 20px;
        margin: 0 auto;
        background-color: #b0d0f0;
        border: 0;
        color: #6080a0;
        font-size: 13px
      }
      
      .linkbtn:active {
        color: #406080;
      }
      
      .divider_page {
        display: none;
        max-width: 780px;
        padding: 20px 30px;
        margin: 60px auto 30px auto;
        border: 1px solid #aaaaaa;
        border-radius: 15px;
      }

      .active.divider_page {
        display: block;
      }
      
      .divider_page h2 {
        color: #00cc00;
        text-align: center;
      }
      
      .divider_page p {
        color: #777777;
        text-align: justify;
      }
      
      .line {
        width: 100%;
        border: 0;
      }
      
      .solid {
        display: none
        border: 0;
        border-top: 4px solid #aaaaaa;
      }

      .active.solid {
        display: block;
      }
      
      .dashed {
        display: none;
        border: 0;
        border-top: 4px dashed #aaaaaa;
      }

      .active.dashed {
        display: block;
      }
      
      .dotted {
        display: none;
        border: 0;
        border-top: 4px dotted #aaaaaa;
      }

      .active.dotted {
        display: block;
      }
      
      legend {
        color: #00cc00;
        border: 0;
        font-weight: 900;
        text-align: center;
      }

JAVASCRIPT


                const linkBtn = document.querySelectorAll('.linkbtn');
const divide = document.querySelector('.divider_page');
const solid = document.querySelector('.solid');
const dashed = document.querySelector('.dashed');
const dotted = document.querySelector('.dotted');

linkBtn.forEach((linkbtns, index) => {
  linkBtn[index].addEventListener('click', () => {
    solid.classList.remove('active');
    dashed.classList.remove('active');
    dotted.classList.remove('active');
    divide.classList.add('active');
    if(index === 0) {
      solid.classList.add('active');
    }else if(index === 1) {
      dashed.classList.add('active');
    }else{
      dotted.classList.add('active');
    }
  });
});

MENU

INFORMATION & CODE