Latest web development tutorials

jQuery UI contoh - panel lipat (Accordion)

Dalam tampilan ruang yang terbatas untuk menyajikan konten informasi panel dilipat.

Untuk rincian lebih lanjut tentang bagian akordeon, lihat dokumentasi API anggota panel lipat (sebuah Accordion Widget) .

Fungsi standar

Klik di kepala untuk memperluas / konten runtuhnya dibagi menjadi berbagai bagian logika, seperti tab (tab) sama. Anda dapat mengatur ketika mouse di apakah akan beralih untuk membuka berbagai bagian on / off status.

tag HTML dasar adalah serangkaian judul (tag H3) dan konten div, sehingga konten yang dapat digunakan tanpa melalui JavaScript.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI akordeon (Accordion) - Fungsi standar </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Fungsi () {
    $ ( "#accordion") .accordion ();
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "akordeon">
  <H3> Part 1 </ h3>
  <Div>
    <P>
    Mauris mauris ante, blandit et, ultrices sebuah, suscipit eget, quam. Integer
    ut neque. Vivamus nisi Metus, molestie vel, ibu hamil di, condimentum duduk
    amet, nunc. Nam nibh a. Donec suscipit jalan. Nam mi. Proin viverra leo ut
    Odio. Curabitur malesuada. Vestibulum sebuah velit eu ante scelerisque vulputate.
    </ P>
  </ Div>
  <H3> Part 2 </ h3>
  <Div>
    <P>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    Purus. Vivamus hendrerit, dolor di aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. Dalam
    suscipit faucibus urna.
    </ P>
  </ Div>
  <H3> bagian 3 </ h3>
  <Div>
    <P>
    Nam enim risus, molestie et, porta ac, Aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque Purus di massa. Aenean di pede. Phasellus ac libero
    ac Tellus pellentesque sempre. Sed ac felis. Sed commodo, magna quis
    Lacinia ornare, quam ante Aliquam nisi, eu iaculis leo Purus venenatis dui.
    </ P>
    <Ul>
      <Li> Daftar satu item </ li>
      <Li> Daftar barang dua </ li>
      <Li> Daftar barang tiga </ li>
    </ Ul>
  </ Div>
  <H3> Bagian 4 </ h3>
  <Div>
    <P>
    Lembaga Pemeringkat Kredit diktum. Pellentesque habitant morbi tristique senectus et netus
    et James malesuada ac egestas turpis. Vestibulum ante ipsum primis di
    faucibus Orci luctus et ultrices Enquiry cubilia Curae; Aenean Lacinia
    mauris vel est.
    </ P>
    <P>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat LECTUS.
    Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra, per
    inceptos himenaeos.
    </ P>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

konten lipat

Secara default, panel runtuhnya selalu tetap bagian terbuka. Untuk memberikan semua bagian dilipat, dapat diatur collapsible pilihan untuk benar. Klik pada bagian saat ini terbuka untuk runtuh panel isinya.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI akordeon (Accordion) - konten Folding </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Fungsi () {
    $ ( "#accordion") .accordion ({
      dilipat: true
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "akordeon">
  <H3> Part 1 </ h3>
  <Div>
    <P> Mauris mauris ante, blandit et, ultrices sebuah, suscipit eget, quam. Integer ut neque. Vivamus nisi Metus, molestie vel, ibu hamil di, condimentum sit amet, nunc. Nam nibh a. Donec suscipit jalan. Nam mi. Proin viverra leo ut Odio. Curabitur malesuada. Vestibulum sebuah velit eu ante scelerisque vulputate. </ p>
  </ Div>
  <H3> Part 2 </ h3>
  <Div>
    <P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor di aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. Dalam suscipit faucibus urna. < / p>
  </ Div>
  <H3> bagian 3 </ h3>
  <Div>
    <P> Nam enim risus, molestie et, porta ac, Aliquam ac, risus. Quisque lobortis. Phasellus pellentesque Purus di massa. Aenean di pede. Phasellus ac libero ac Tellus pellentesque sempre. Sed ac felis. Sed commodo, magna quis Lacinia ornare , quam ante Aliquam nisi, eu iaculis leo Purus venenatis dui. </ p>
    <Ul>
      <Li> Daftar satu item </ li>
      <Li> Daftar barang dua </ li>
      <Li> Daftar barang tiga </ li>
    </ Ul>
  </ Div>
  <H3> Bagian 4 </ h3>
  <Div>
    <P> Cras diktum Pellentesque habitant morbi tristique senectus et netus et malesuada James ac turpis egestas Vestibulum ante ipsum primis di faucibus Orci luctus et ultrices Enquiry cubilia Curae; .. Aenean Lacinia mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat LECTUS. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra, per inceptos himenaeos. </ p>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Ikon kustom

Melalui icons pilihan untuk menyesuaikan ikon judul, icons pilihan untuk menerima gelar default dan mengaktifkan (terbuka) kelas negara. Menggunakan kerangka UI CSS kelas apapun, atau membuat kelas khusus untuk menggunakan gambar latar belakang.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI akordeon (Accordion) - ikon Kustom </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Fungsi () {
    ikon var = {
      tajuk: "ui-icon-lingkaran-panah-e",
      activeHeader: "ui-icon-lingkaran-panah-s"
    };
    $ ( "#accordion") .accordion ({
      Ikon: Ikon
    });
    $ ( "#toggle") .button (). Klik (function () {
      if ($ ( "#accordion") .accordion ( "pilihan", "ikon")) {
        $ ( "#accordion") .accordion ( "Option", "ikon", null);
      } Lain {
        $ ( "#accordion") .accordion ( "Option", "ikon", ikon);
      }
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "akordeon">
  <H3> Part 1 </ h3>
  <Div>
    <P> Mauris mauris ante, blandit et, ultrices sebuah, suscipit eget, quam. Integer ut neque. Vivamus nisi Metus, molestie vel, ibu hamil di, condimentum sit amet, nunc. Nam nibh a. Donec suscipit jalan. Nam mi. Proin viverra leo ut Odio. Curabitur malesuada. Vestibulum sebuah velit eu ante scelerisque vulputate. </ p>
  </ Div>
  <H3> Part 2 </ h3>
  <Div>
    <P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor di aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. Dalam suscipit faucibus urna. < / p>
  </ Div>
  <H3> bagian 3 </ h3>
  <Div>
    <P> Nam enim risus, molestie et, porta ac, Aliquam ac, risus. Quisque lobortis. Phasellus pellentesque Purus di massa. Aenean di pede. Phasellus ac libero ac Tellus pellentesque sempre. Sed ac felis. Sed commodo, magna quis Lacinia ornare , quam ante Aliquam nisi, eu iaculis leo Purus venenatis dui. </ p>
    <Ul>
      <Li> Daftar satu item </ li>
      <Li> Daftar barang dua </ li>
      <Li> Daftar barang tiga </ li>
    </ Ul>
  </ Div>
  <H3> Bagian 4 </ h3>
  <Div>
    <P> Cras diktum Pellentesque habitant morbi tristique senectus et netus et malesuada James ac turpis egestas Vestibulum ante ipsum primis di faucibus Orci luctus et ultrices Enquiry cubilia Curae; .. Aenean Lacinia mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat LECTUS. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra, per inceptos himenaeos. </ p>
  </ Div>
</ Div>
 
<Tombol id = "beralih"> ikon ubah </ button>
 
 
</ Body>
</ Html>

ruang mengisi

Sejak panel lipat terdiri dari unsur-unsur blok-tingkat, dan secara default lebarnya mengisi ruang horisontal yang tersedia. Untuk mengisi ruang vertikal dialokasikan oleh wadah, mengatur heightStyle pilihan "fill" , script secara otomatis akan mengatur tinggi dari ukuran panel lipat dari wadah induk.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI akordeon (Accordion) - mengisi ruang </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Gaya>
  # Accordion-resizer {
    padding: 10px;
    width: 350px;
    height: 220px;
  }
  </ Style>
  <Script>
  $ (Fungsi () {
    $ ( "#accordion") .accordion ({
      heightStyle: "isi"
    });
  });
  $ (Fungsi () {
    $ ( "# Accordion-resizer") .resizable ({
      minHeight: 140,
      MinWidth: 200,
      mengubah ukuran: function () {
        $ ( "#accordion") .accordion ( "Refresh");
      }
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Class H3 = "docs"> menyesuaikan wadah luar: </ h3>
 
<Div id = "akordeon-resizer" class = "ui-widget-content">
  <Div id = "akordeon">
    <H3> Part 1 </ h3>
    <Div>
      <P> Mauris mauris ante, blandit et, ultrices sebuah, suscipit eget, quam. Integer ut neque. Vivamus nisi Metus, molestie vel, ibu hamil di, condimentum sit amet, nunc. Nam nibh a. Donec suscipit jalan. Nam mi. Proin viverra leo ut Odio. Curabitur malesuada. Vestibulum sebuah velit eu ante scelerisque vulputate. </ p>
    </ Div>
    <H3> Part 2 </ h3>
    <Div>
      <P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor di aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. Dalam suscipit faucibus urna. < / p>
    </ Div>
    <H3> bagian 3 </ h3>
    <Div>
      <P> Nam enim risus, molestie et, porta ac, Aliquam ac, risus. Quisque lobortis. Phasellus pellentesque Purus di massa. Aenean di pede. Phasellus ac libero ac Tellus pellentesque sempre. Sed ac felis. Sed commodo, magna quis Lacinia ornare , quam ante Aliquam nisi, eu iaculis leo Purus venenatis dui. </ p>
      <Ul>
        <Li> Daftar satu item </ li>
        <Li> Daftar barang dua </ li>
        <Li> Daftar barang tiga </ li>
      </ Ul>
    </ Div>
    <H3> Bagian 4 </ h3>
    <Div>
      <P> Cras diktum Pellentesque habitant morbi tristique senectus et netus et malesuada James ac turpis egestas Vestibulum ante ipsum primis di faucibus Orci luctus et ultrices Enquiry cubilia Curae; .. Aenean Lacinia mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat LECTUS. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra, per inceptos himenaeos. </ p>
    </ Div>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

tinggi non-otomatis

Pengaturan heightStyle: "content" , sehingga panel dilipat mempertahankan ketinggian asli mereka.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI akordeon (Accordion) - tinggi non-otomatis </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Fungsi () {
    $ ( "#accordion") .accordion ({
      heightStyle: "content"
    });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "akordeon">
  <H3> Part 1 </ h3>
  <Div>
    <P> Mauris mauris ante, blandit et, ultrices sebuah, susceros. Nam mi. Proin viverra leo ut Odio Curabitur malesuada. Vestibulum. A velit eu ante scelerisque vulputate. </ P>
  </ Div>
  <H3> Part 2 </ h3>
  <Div>
    <P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor di aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. Dalam suscipit faucibus urna. < / p>
  </ Div>
  <H3> bagian 3 </ h3>
  <Div>
    <P> Nam enim risus, molestie et, porta ac, Aliquam ac, risus. Quisque lobortis. Phasellus pellentesque Purus di massa. Aenean di pede. Phasellus ac libero ac Tellus pellentesque sempre. Sed ac felis. Sed commodo, magna quis Lacinia ornare , quam ante Aliquam nisi, eu iaculis leo Purus venenatis dui. </ p>
    <Ul>
      <Li> Daftar barang </ li>
      <Li> Daftar barang </ li>
      <Li> Daftar barang </ li>
      <Li> Daftar barang </ li>
      <Li> Daftar barang </ li>
      <Li> Daftar barang </ li>
      <Li> Daftar barang </ li>
    </ Ul>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Ketika terbuka melayang

Klik di kepala untuk memperluas / konten runtuhnya dibagi menjadi berbagai bagian logika, seperti tab (tab) sama. Anda dapat mengatur ketika mouse di apakah akan beralih untuk membuka berbagai bagian on / off status.

tag HTML dasar adalah serangkaian judul (tag H3) dan konten div, sehingga konten yang dapat digunakan tanpa melalui JavaScript.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI akordeon (Accordion) - Ketika melayang terbuka </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Script>
  $ (Fungsi () {
    $ ( "#accordion") .accordion ({
      acara: "klik hoverIntent"
    });
  });
 
  / *
   * HoverIntent | Copyright 2011 Brian Cherne
   * Http://cherne.net/brian/resources/jquery.hoverIntent.html
   * Diubah oleh tim jQuery UI
   * /
  $ .event.special.hoverintent = {
    setup: function () {
      $ (Ini) .bind ( "mouseover", jQuery.event.special.hoverintent.handler);
    },
    teardown: function () {
      $ (Ini) .unbind ( "mouseover", jQuery.event.special.hoverintent.handler);
    },
    handler: function (event) {
      var CurrentX, CurrentY, timeout,
        args = argumen,
        target = $ (event.target),
        previousX = event.pageX,
        previousY = event.pageY;
 
      Fungsi track (event) {
        CurrentX = event.pageX;
        CurrentY = event.pageY;
      };
 
      fungsi yang jelas () {
        target
          .unbind ( "MouseMove", track)
          .unbind ( "mouseout", jelas);
        clearTimeout (timeout);
      }
 
      fungsi pengendali () {
        var prop,
          orig = acara;
 
        if ((Math.abs (previousX - CurrentX) +
            Math.abs (previousY - CurrentY)) <7) {
          jelas ();
 
          Acara = $ .Event ( "hoverIntent");
          untuk (prop di orig) {
            if (! (prop di event)) {
              Acara [prop] = orig [prop];
            }
          }
          // Mencegah akses ke acara asli, karena acara baru akan dipicu asynchronous, acara tua tidak lagi tersedia (# 6028)
          menghapus event.originalEvent;
 
          target.trigger (event);
        } Lain {
          previousX = CurrentX;
          previousY = CurrentY;
          timeout = setTimeout (handler, 100);
        }
      }
 
      timeout = setTimeout (handler, 100);
      target.bind ({
        mousemove: track,
        mouseout: jelas
      });
    }
  };
  </ Script>
</ Kepala>
<Body>
 
<Div id = "akordeon">
  <H3> Part 1 </ h3>
  <Div>
    <P>
    Mauris mauris ante, blandit et, ultrices sebuah, suscipit eget, quam. Integer
    ut neque. Vivamus nisi Metus, molestie vel, ibu hamil di, condimentum duduk
    amet, nunc. Nam nibh a. Donec suscipit jalan. Nam mi. Proin viverra leo ut
    Odio. Curabitur malesuada. Vestibulum sebuah velit eu ante scelerisque vulputate.
    </ P>
  </ Div>
  <H3> Part 2 </ h3>
  <Div>
    <P>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    Purus. Vivamus hendrerit, dolor di aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. Dalam
    suscipit faucibus urna.
    </ P>
  </ Div>
  <H3> bagian 3 </ h3>
  <Div>
    <P>
    Nam enim risus, molestie et, porta ac, Aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque Purus di massa. Aenean di pede. Phasellus ac libero
    ac Tellus pellentesque sempre. Sed ac felis. Sed commodo, magna quis
    Lacinia ornare, quam ante Aliquam nisi, eu iaculis leo Purus venenatis dui.
    </ P>
    <Ul>
      <Li> Daftar satu item </ li>
      <Li> Daftar barang dua </ li>
      <Li> Daftar barang tiga </ li>
    </ Ul>
  </ Div>
  <H3> Bagian 4 </ h3>
  <Div>
    <P>
    Lembaga Pemeringkat Kredit diktum. Pellentesque habitant morbi tristique senectus et netus
    et James malesuada ac egestas turpis. Vestibulum ante ipsum primis di
    faucibus Orci luctus et ultrices Enquiry cubilia Curae; Aenean Lacinia
    mauris vel est.
    </ P>
    <P>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat LECTUS.
    Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra, per
    inceptos himenaeos.
    </ P>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>

Urutkan (Sortable)

Tarik judul untuk panel untuk menyusun ulang.

<! DOCTYPE html>
<Html lang = "en">
<Head>
  <Meta charset = "utf-8">
  <Title> jQuery UI akordeon (Accordion) - menyortir (Sortable) </ title>
  <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script>
  <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script>
  <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css">
  <Gaya>
  / * Ketika memesan, ada masalah tata letak IE (lihat # 5413) * /
  .group {zoom: 1}
  </ Style>
  <Script>
  $ (Fungsi () {
    $ ( "#accordion")
      .accordion ({
        tajuk: "> div> h3"
      })
      .sortable ({
        axis: "y",
        menangani: "h3",
        berhenti: function (event, ui) {
          // Ketika Anda menyortir, IE tidak dapat didaftarkan blur, sehingga memicu focusout handler untuk menghapus Ui-negara-focus
          ui.item.children ( "h3") .triggerHandler ( "focusout");
        }
      });
  });
  </ Script>
</ Kepala>
<Body>
 
<Div id = "akordeon">
  <Class Div = "group">
    <H3> Part 1 </ h3>
    <Div>
      <P> Mauris mauris ante, blandit et, ultrices sebuah, suscipit eget, quam. Integer ut neque. Vivamus nisi Metus, molestie vel, ibu hamil di, condimentum sit amet, nunc. Nam nibh a. Donec suscipit jalan. Nam mi. Proin viverra leo ut Odio. Curabitur malesuada. Vestibulum sebuah velit eu ante scelerisque vulputate. </ p>
    </ Div>
  </ Div>
  <Class Div = "group">
    <H3> Part 2 </ h3>
    <Div>
      <P> Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet Purus. Vivamus hendrerit, dolor di aliquet laoreet, mauris turpis porttitor velit, faucibus interdum Tellus libero ac justo. Vivamus non quam. Dalam suscipit faucibus urna. < / p>
    </ Div>
  </ Div>
  <Class Div = "group">
    <H3> bagian 3 </ h3>
    <Div>
      <P> Nam enim risus, molestie et, porta ac, Aliquam ac, risus. Quisque lobortis. Phasellus pellentesque Purus di massa. Aenean di pede. Phasellus ac libero ac Tellus pellentesque sempre. Sed ac felis. Sed commodo, magna quis Lacinia ornare , quam ante Aliquam nisi, eu iaculis leo Purus venenatis dui. </ p>
      <Ul>
        <Li> Daftar satu item </ li>
        <Li> Daftar barang dua </ li>
        <Li> Daftar barang tiga </ li>
      </ Ul>
    </ Div>
  </ Div>
  <Class Div = "group">
    <H3> Bagian 4 </ h3>
    <Div>
      <P> Cras diktum Pellentesque habitant morbi tristique senectus et netus et malesuada James ac turpis egestas Vestibulum ante ipsum primis di faucibus Orci luctus et ultrices Enquiry cubilia Curae; .. Aenean Lacinia mauris vel est </ p> <p> Suspendisse eu nisl. . Nullam ut libero. Integer dignissim consequat LECTUS. Kelas aptent taciti sociosqu iklan litora torquent per conubia nostra, per inceptos himenaeos. </ p>
    </ Div>
  </ Div>
</ Div>
 
 
</ Body>
</ Html>