How to fix: "Using JS inside Bootstrap 4's div and Div isn't working but JS works"

Question

I'm trying to hide/show comments. JS works fine because I found solution in here. (ty for that JS solution "PiggyPlex" via How can I hide/show a div when a button is clicked?)

Main problem is: JS works fine but it can not adapt to bootstrap div structure.

I don't know how to fix it or maybe bootstrap cant let it works properly. I need any info to go forward or i just let it go. Thank you

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui" />
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">

</head>

<body>

    <div class="main container-fluid" role="main">
        <div class="row mt-5">
                <div class="sitter_comments col-md-12 mb-3">
                    <a href=""><h5>Yorumlar (6)</h5></a>
                </div>

            <!--first comment-->
                    <div class="commenter_picture col-md-1">
                        <img src="images/bakici/asd.PNG" alt="" width="50" height="50">
                    </div>
                    <div class="commenter_infos col-md-11">
                                                        <h6>Ali A.</h6>

                                <h7>22.06.2018</h7>
                            </div>
                    <div class="customer_comment col-md-12 mt-2">
                        Köpeğime çok iyi bakmış. Sanki hiç benden gitmemiş gibiydi. Tekrar köpeğimi bırakmayı düşünüyorum.<hr>
                    </div>

            <!--second comment-->
                <div class="commenter_picture col-md-1">
                        <img src="images/bakici/asd.PNG" alt="" width="50" height="50">
                    </div>
                    <div class="commenter_infos col-md-11">
                                                        <h6>Ali A.</h6>

                                <h7>22.06.2018</h7>
                            </div>
                    <div class="customer_comment col-md-12 mt-2">
                        Köpeğime çok iyi bakmış. Sanki hiç benden gitmemiş gibiydi. Tekrar köpeğimi bırakmayı düşünüyorum.<hr>
                    </div>

            <!--third comment but hidden-->
                <div id="yorumlariGor" style="display:none;">

            <div class="commenter_picture_hide col-md-1">
                        <img src="images/bakici/asd.PNG" alt="" width="50" height="50">
                    </div>
                    <div class="commenter_infos_hide col-md-11">
                                                        <h6>Ali A.</h6>

                                <h7>22.06.2018</h7>
                            </div>
                    <div class="customer_comment_hide col-md-12 mt-2">
                        Köpeğime çok iyi bakmış. Sanki hiç benden gitmemiş gibiydi. Tekrar köpeğimi bırakmayı düşünüyorum.<hr>

        </div>
        </div>  

                <!--To see all comments-->
    <script>  function showhide(id) {
        var e = document.getElementById(id);
        e.style.display = (e.style.display == 'block') ? 'none' : 'block';
     }</script>
            <!--To see all comments-->

<div class="row">
                <div class="see_all_comments col-md-12 text-right">
            <a href="javascript:showhide('yorumlariGor')">
            Tümünü Gör
        </a>
    </div>
</div>
    </div>
    </div>  
</body>
</html>

example of my code

score 0 · Accepted Answer · answered Sep 02 '19 at 11:26

The extra div is breaking the bootstrap grid concept.

Please try below code.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Untitled Document</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui"
    />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css"
    />
    <style>
      .yorumlariGor {
        display: none;
      }
    </style>
  </head>

  <body>
    <div class="main container-fluid" role="main">
      <div class="row mt-5">
        <div class="sitter_comments col-md-12 mb-3">
          <a href=""><h5>Yorumlar (6)</h5></a>
        </div>

        <!--first comment-->
        <div class="commenter_picture col-md-1">
          <img src="images/bakici/asd.PNG" alt="" width="50" height="50" />
        </div>
        <div class="commenter_infos col-md-11">
          <h6>Ali A.</h6>

          <h7>22.06.2018</h7>
        </div>
        <div class="customer_comment col-md-12 mt-2">
          Köpeğime çok iyi bakmış. Sanki hiç benden gitmemiş gibiydi. Tekrar
          köpeğimi bırakmayı düşünüyorum.
          <hr />
        </div>

        <!--second comment-->
        <div class="commenter_picture col-md-1">
          <img src="images/bakici/asd.PNG" alt="" width="50" height="50" />
        </div>
        <div class="commenter_infos col-md-11">
          <h6>Ali A.</h6>

          <h7>22.06.2018</h7>
        </div>
        <div class="customer_comment col-md-12 mt-2">
          Köpeğime çok iyi bakmış. Sanki hiç benden gitmemiş gibiydi. Tekrar
          köpeğimi bırakmayı düşünüyorum.
          <hr />
        </div>

        <!--third comment but hidden-->
        <div class="commenter_picture_hide yorumlariGor col-md-1">
          <img src="images/bakici/asd.PNG" alt="" width="50" height="50" />
        </div>
        <div class="commenter_infos_hide yorumlariGor col-md-11">
          <h6>Ali A.</h6>

          <h7>22.06.2018</h7>
        </div>
        <div class="customer_comment_hide yorumlariGor col-md-12 mt-2">
          Köpeğime çok iyi bakmış. Sanki hiç benden gitmemiş gibiydi. Tekrar
          köpeğimi bırakmayı düşünüyorum.
          <hr />
        </div>

        <!--To see all comments-->
        <script>
          function showhide(id) {
            var x = document.getElementsByClassName(id);
            for (var i = 0; i < x.length; i++) {
              console.log(x[i].style.display);
              x[i].style.display =
                x[i].style.display == "block" ? "none" : "block";
            }
          }
        </script>
        <!--To see all comments-->

        <div class="row">
          <div class="see_all_comments col-md-12 text-right">
            <a href="javascript:showhide('yorumlariGor')">
              Tümünü Gör
            </a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

How did you do that? Can you tell me another way which you followed? — Alok Mali, Sep 02 '19 at 13:23
I mean you solved my problem. Sorry for my bad english. Thank you so much again! — gncyevrn, Sep 02 '19 at 15:25

How to fix: "Using JS inside Bootstrap 4's div and Div isn't working but JS works"

1 Answers1