How to show HTML widget with expandable show more / show less

Question

How to show HTML widget with expandable show more / show less

222 views Asked by Genius_balu At 31 July 2023 at 06:33

import 'package:flutter_widget_from_html/flutter_widget_from_html.dart'

   HtmlWidget('''<p>We have studied the Agile methodology where Agile is a set of beliefs which should be followed to <i>develop the software development project</i>. On <h3>these beliefs or values</h3>, there is many models have developed, and in which one of the models is a <strong>scrum</strong>.We have studied the Agile methodology where Agile is a set of beliefs which should be followed to develop the software <b>development project</b>. On these beliefs or values, there is many <u>models have developed</u>, and in which one of the models is a <strong>scrum</strong>.</p>'''),

Expected output:

https://media.geeksforgeeks.org/wp-content/uploads/20201031002151/ex1.gif

Original Q&A

There are 1 answers

**shafa vp** · Answer 1 · 2023-07-31T06:39:18+00:00

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      * {
        box-sizing: border-box;
      }

      .column {
        float: left;
        width: 33.33%;
        padding: 50px;
        text-align: center;
        font-size: 25px;
        cursor: pointer;
        color: white;
      }

      .tab {
        padding: 20px;
        color: white;
      }

      .row:after {
        overflow: hidden;
        display: table;
        clear: both;
      }

      .closeButton {
        float: right;
        color: white;
        font-size: 35px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div style="text-align:center">
      <h2>Expanding/Collapsible Grids in HTML</h2>
    </div>

    <div class="row">
      <div class="column" onclick="openGrid('expd1');" style="background:red;">
        Grid1
      </div>
      <div
        class="column"
        onclick="openGrid('expd2');"
        style="background:green;"
      >
        Grid2
      </div>
      <div class="column" onclick="openGrid('expd3');" style="background:blue;">
        Grid3
      </div>
    </div>

    <div id="expd1" class="tab" style="display:none; background:red">
      <span
        onclick="this.parentElement.style.display='none'"
        class="closeButton"
      >
        &times;
      </span>
      <h2>Box 1</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <div id="expd2" class="tab" style="display:none; background:green">
      <span
        onclick="this.parentElement.style.display='none'"
        class="closeButton"
      >
        &times;
      </span>
      <h2>Box 2</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>
    <div id="expd3" class="tab" style="display:none; background:blue">
      <span
        onclick="this.parentElement.style.display='none'"
        class="closeButton"
      >
        &times;
      </span>
      <h2>Box 3</h2>
      <p>
        Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti
        intellegat, te sanctus inermis ullamcorper nam. Ius error diceret
        deseruisse ad
      </p>
    </div>

    <script>
      function openGrid(tabContent) {
        var i, x
        x = document.getElementsByClassName('tab')
        for (i = 0; i < x.length; i++) {
          x[i].style.display = 'none'
        }
        document.getElementById(tabContent).style.display = 'block'
      }
    </script>
  </body>
</html>

TechQA.

How to show HTML widget with expandable show more / show less

There are 1 answers

Related Questions in FLUTTER

Related Questions in FLUTTER-HTML

Popular Questions

Popular Tags

Trending Questions