Реализация кнопки «Показать/Скрыть» на веб-странице с примерами кода

“showhidebtn” — это термин, который, по-видимому, относится к кнопке или элементу, который можно использовать для отображения или скрытия контента на веб-странице. Вот несколько методов, которые можно использовать для реализации кнопки «показать/скрыть» на различных языках программирования:

  1. JavaScript/jQuery:

    <button id="showhidebtn">Show/Hide Content</button>
    <div id="content" >
    This is the hidden content.
    </div>
    <script>
    document.getElementById("showhidebtn").addEventListener("click", function() {
    var content = document.getElementById("content");
    if (content.style.display === "none") {
      content.style.display = "block";
    } else {
      content.style.display = "none";
    }
    });
    </script>
  2. HTML/CSS:

    <button id="showhidebtn" onclick="toggleContent()">Show/Hide Content</button>
    <div id="content" >
    This is the hidden content.
    </div>
    <script>
    function toggleContent() {
    var content = document.getElementById("content");
    if (content.style.display === "none") {
      content.style.display = "block";
    } else {
      content.style.display = "none";
    }
    }
    </script>
  3. React (библиотека JavaScript):

    import React, { useState } from 'react';
    function ShowHideButton() {
    const [showContent, setShowContent] = useState(false);
    const toggleContent = () => {
    setShowContent(!showContent);
    };
    return (
    <div>
      <button onClick={toggleContent}>Show/Hide Content</button>
      {showContent && <div>This is the hidden content.</div>}
    </div>
    );
    }
  4. Angular (фреймворк TypeScript):

    <button (click)="toggleContent()">Show/Hide Content</button>
    <div *ngIf="showContent">
    This is the hidden content.
    </div>
    <script>
    import { Component } from '@angular/core';
    @Component({
    selector: 'app-show-hide-button',
    templateUrl: './show-hide-button.component.html',
    styleUrls: ['./show-hide-button.component.css']
    })
    export class ShowHideButtonComponent {
    showContent = false;
    toggleContent() {
      this.showContent = !this.showContent;
    }
    }
    </script>
  5. Vue.js (фреймворк JavaScript):

    false
    };
    },
    методы: {
    toggleContent() {
    this.showContent = !this.showContent;

    }