Fixing the issue: "Tricky situation with JavaScript not working within Bootstrap 4's div tag while JS functions properly elsewhere"

Currently, I'm working on implementing a hide/show function for comments using JavaScript. Fortunately, I was able to find a helpful solution here (thanks to "PiggyPlex" for providing the solution on How can I hide/show a div when a button is clicked?)

The main obstacle I'm facing is that while the JavaScript works fine, it does not seamlessly integrate with the Bootstrap div structure.

I'm unsure how to address this issue or if it could be a limitation imposed by Bootstrap itself. Any guidance or insights on how to proceed would be greatly appreciated. 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>Comments (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">
                        He took great care of my dog. It was as if my dog hadn't left me at all. I am considering leaving my dog with him again.<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">
                        He took great care of my dog. It was as if my dog hadn't left me at all. I am considering leaving my dog with him again.<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">
                        He took great care of my dog. It was as if my dog hadn't left me at all. I am considering leaving my dog with him again.<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')">
            View All
        </a>
    </div>
</div>
    </div>
    </div>  
</body>
</html>

Example of My Code

javascripthtmlcssbootstrap-4

Answer №1

The additional div is disrupting the layout of the bootstrap grid system.

Please attempt the code provided below.

<!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>Comments (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">
          He took great care of my dog. It was as if she had never left me. I am considering leaving my dog with him again.
          <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">
          He took great care of my dog. It was as if she had never left me. I am considering leaving my dog with him again.
          <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">
          He took great care of my dog. It was as if she had never left me. I am considering leaving my dog with him again.
          <hr />
        </div>

        <!--To view 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 view all comments-->

        <div class="row">
          <div class="see_all_comments col-md-12 text-right">
            <a href="javascript:showhide('yorumlariGor')">
              View All
            </a>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The script fails to work correctly when displaying the data

Last night, I finally cracked the code on how to transfer data from my form on the index page to the content page, and then display the results inside the content div back on the index page. However, a new challenge has emerged. My Javascript function (re ...

javascriptphphtml

Storing an array in a cookie using Angular 8

Currently, I am utilizing the ngx-cookie-service package. { "user": [ { "id": 109, "name": "name1", "job" : "job name" } ], "token":"xxxx" } this.cookieService.set( 'user_id', ...

javascriptangularcookiesangular6ngx-cookie-service

Centering Text and Image in React Horizontally

I'm attempting to achieve a layout similar to the one shown in the image below. Currently, my image is positioned at the top with the text below it. I would like to arrange it so that the text appears on the right side of the image. Please take a loo ...

cssreactjsmaterial-uiflexboxjss

Vue.js component unable to validate HTML input patterns

Attempting to create HTML forms with the 'pattern' input attribute has been an interesting challenge for me. When implementing this through Vue.js components, I encountered some strange behavior. Check out this fiddle to see it in action. Vue.co ...

javascripthtmlvue.jsvuejs2vue-component

Is there a way to horizontally align my navigation bar links with CSS while maintaining grey borders on the sides?

What is the best way to center my navigation bar links using CSS without losing the grey sides? Both Blogs and History have dropdown menus. Check out this screenshot: https://i.sstatic.net/2kvTm.png (source: gyazo.com) CSS: .navbar ul { list-styl ...

htmlcsscenter

Guide on how to switch a class on the body using React's onClick event

There's a button in my code that triggers the display of a modal-like div element. When this button is clicked, I aim to apply a class to the body element; then when the close button is clicked, I'll remove this class. I'm looking for guid ...

javascriptreactjstypescript

AJAX chat application's updating frequency

As I work on building a website that includes a feature for real-time chatting between users (similar to Facebook chat), I have implemented a system where messages are stored in a MySQL table called messages. This table contains the message ID, sender ID, ...

javascriptsqlajaxchat

Transmitting payment card details to the node

I'm considering utilizing dibs payment dibspayment I came across this Node.js wrapper for the: DIBS API wrapper for Node.js However, using this would involve sending credit card information through a POST request to my node server. My main concern ...

javascriptnode.jsdibs

Exploring the Jquery functionality: $(document).ready(callback);

Hey there, I'm struggling to run a function both on window resize and document ready. The issue is that when the resize event is triggered by mobile scroll, it's essential to ensure the height hasn't changed. Oddly enough, the code works fin ...

javascriptjqueryjquery-callback

Successful Mongoose query in Node.js, however the array remains empty even after using forEach loop. Issue with MongoDB integration

After performing a forEach inside an asynchronous method, I am trying to return an array of names. The issue is that despite the forEach working correctly, the array always ends up empty. On the website side, here is my request: function retrieveCharity( ...

javascriptarraysnode.jsmongodbforeach

I just finished crafting a dynamic line chart with d3.js within a React environment. However, I am now looking to add some personalized touches to enhance its appearance. Could you kindly review the details and code

I want to create a line chart using React and D3, similar to the one depicted in this image. Presently, I have partially implemented the chart with the code provided below. You can see it here. The code snippet I've developed so far is outlined as f ...

javascriptreactjsd3.jsdata-visualizationreact-d3

Mixing two elements for a continuous animation without the use of JavaScript

I'm interested in creating an animation that cycles between "0% interest free credit" and "free delivery". I am attempting to achieve this without the use of JavaScript, but so far I can only make the first element fade away without the second one fad ...

htmlcsscss-animations

Inaccurate rendering of border widths on IOS platform

After setting the border width of these input boxes to 1px, it appears that on iOS devices, the top border seems larger than intended (regardless of the browser being used). Interestingly, on any other type of device, the border looks perfectly fine. & ...

htmlioscss

What is the best way to incorporate an external .css file into my Angular project by referencing its URL?

I'm managing a collection of CSS files online and I need to incorporate each one into my project based on its specific requirements. One component in particular is connected to different numerical IDs in the router. I am looking for a way to dynamica ...

cssangulartypescriptsass

In my database, I have two tables: Table1 and Table2. To better illustrate my issue, I have included a picture for reference

https://i.stack.imgur.com/GQAMy.jpg I am facing a challenge with joining two tables, table1 and table2, in MySQL. I need assistance in creating the resultant table as shown in the attached picture. Your help in solving this issue would be greatly appreci ...

phphtmlmysqllaravelvue.js

Managing timestamps of creation and modification with Sequelize and Postgresql

As a newcomer to Sequelize, I find myself grappling with the intricacies of model timestamps management. Despite prior experience with another ORM in a different language, I'm struggling to wrap my head around how to automatically handle "createdAt" a ...

javascriptnode.jspostgresqlsequelize.js

Exploring the potential of TypeScript with native dynamic ES2020 modules, all without the need for Node.js, while also enhancing

I have a TypeScript application that utilizes es16 modules, with most being statically imported. I am now looking to incorporate a (validator) module that is only imported in debug mode. Everything seems to be functioning properly, but I am struggling to f ...

javascripttypescriptimportecmascript-2020

Ways to trigger a function when the body is loaded

In this snippet, I am attempting to execute the oauth2_login() function when the body loads, which is intended to log in the user. Currently, I have hardcoded values from the database into the username and password fields. <!DOCTYPE html> <html&g ...

javascriptjqueryjsonajax

Tips for saving JavaScript results to a form

Hey there! I'm looking to figure out how to save a JavaScript calculation within a form instead of just displaying an alert or outputting it on another page. Below is the JavaScript code I have for calculating prices. <script type="text/javascript ...

javascripthtmlforms

Having trouble with the functionality of Bootstrap 5 carousel?

I've been attempting to integrate this carousel into my Bootstrap 5 webpage. I found it on Codepen - https://codepen.io/sahil-verma/pen/wxXryx Thus far, I've copied the code into my webpage and linked the corresponding CSS within style tags, sim ...

htmlcsstwitter-bootstrapbootstrap-5