I am looking to eliminate any unnecessary gaps within the list group

I'm currently learning how to create a sidebar in my project.

Whenever item 3 is expanded, an unwanted rectangular area appears underneath it.

I have not added any padding in my code nor any CSS styles. I attempted to use browser inspect tools, but I wasn't able to resolve the issue.

I really want to remove this blank rectangular area that's bothering me.

Thank you.

Here's the code snippet (also available in the link below): 

      <div class="list-group">
        <a href="#" class="list-group-item list-group-item-success">
                   Item 1</a>
        <a ref="#" class="list-group-item list-group-item-success">
                   Item 2</a>
        <a href="#IDp_3" class="list-group-item list-group-item-success" 
           data-toggle="collapse"
           onclick=" $('#PM0001').toggleClass('fa-minus-square fa-plus-square')">
           <i class="fas fa fa-plus-square" id="PM0001" ></i>
                    Item 3                                      
           <div class="collapse" id="IDp_3">
           <a href="" class="list-group-item">
                   -3.1</a>
            <a href="" class="list-group-item">
                   -3.2</a>
            <a href="" class="list-group-item">
                   -3.3</a>
      </div?
    <div>
</div>

JS Fiddle code with this issue.

https://i.sstatic.net/7aAsS.jpg

csshtmlbootstrap-4

Answer №1

Be sure to close the anchor tag after Item 3

<a href="#p_3" class="list-group-item list-group-item-success" data-toggle="collapse"  onclick=" $('#PM0001').toggleClass('fa-minus-square fa-plus-square')">
                    <i class="fas fa fa-plus-square" id="PM0001" ></i>
                        Item 3
                        </a>

Check out the Fiddle here: https://jsfiddle.net/5vfxpt6b/

Answer №2

The reason for the issue is the missing closing tag for the third anchor element.

Error Code: Unmatched Tags

   <a href="#p_3" class="list-group-item list-group-item-success" data-toggle="collapse"
                    onclick=" $('#PM0001').toggleClass('fa-minus-square fa-plus-square')">
                    <i class="fas fa fa-plus-square" id="PM0001" ></i>
                        Item 3

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

Discover a foolproof method for effortlessly examining an flv or mp4 file embedded within a webpage simply by

I've encountered a challenge with JavaScript. I can successfully check a flash object in a webpage when hovering over it, but I'm unsure how to achieve the same for flv or mp4 objects when either hovering over or moving away from them. Currently ...

javascriptjqueryhtml

Uploading and previewing multiple images on a canvas

After successfully creating single upload for images and placing them on canvas as seen in http://jsfiddle.net/StJnY/, I am now looking to adapt the script for multiple image uploads. Here is how I plan to modify the script: JS : $(function () { $(&a ...

javascripthtmljqueryjquery-eventsfilereader

Is it possible to utilize a CSV file to dictate which images should be utilized on my website as a guide?

I'm currently working on my website's gallery and have a collection of over 60 images. I'm exploring ways to streamline the process of displaying these images by having the website read their names from a CSV file instead of manually coding ...

javascriptphphtmldatabasecsv

Tips for utilizing multiple CSS styles in JavaScript

My goal is to apply multiple CSS styles to a button with the id of name_button. Below is the JavaScript code I have written: var name_button = document.getElementById('name_button'); name_button.style.display = 'block'; name_button.st ...

javascripthtmlcss

What steps can I take to make the cards in bootstrap 5.3 responsive for mobile devices?

I'm struggling with my code and need some help. I've been editing it, but things seem to be getting worse instead of better. Specifically, I can't figure out how to set up my container, row, and columns in Bootstrap properly. My site uses ca ...

htmlcsssassbootstrap-5responsive-images

How can I make the lines of my drawer thicker in Material UI?

Currently, I'm in the process of implementing a left-side navigation bar for a web application I'm developing. The main challenge I'm facing is customizing the styles as desired when using the Drawer component. Specifically, I'm aiming ...

javascripthtmlcssmaterial-ui

Ways to identify if the text entered in a text area is right-to-left justified

Within a textarea, users can input text in English (or any other left-to-right language) or in a right-to-left language. If the user types in a right-to-left language, they must press Right-shift + ctrl to align the text to the right. However, on modern O ...

javascriptjqueryhtmlcssright-to-left

Is there a way to add CSS styles to all div elements except for those that are contained within a parent div with a certain class

I have a universal CSS that impacts all div elements, but I need to exclude the divs within a parent div that has a specific class, like in this instance where it's the "should-not-apply" class. div { font-size: 20px !important; font-weight: 50 ...

htmlcssreactjsnext.jsserver-side-rendering

dealing with a situation where the call to the getElementsByTagname method returns null

Here is a snippet of JavaScript code that I am working with: <script language="JavaScript" type="text/javascript"> var sendReq = getXmlHttpRequestObject(); var receiveReq = getXmlHttpRequestObject(); var lastMessage = 0; var mTimer; ...

htmlxmlajax

Styling tricks for rotating carousel images using CSS animations

I'm currently working on a carousel component that functions without the use of JavaScript. While I have made significant progress towards my goal, I am facing challenges with the animation itself. The desired behavior is for the slides to animate o ...

htmlcss

Retrieve a portion of a webpage from a separate file

Is there a way to load part of a page from another HTML/PHP file? Here's my current situation: I have a PHP file that contains: $dirname = dirname(__FILE__); //Path to your *.php file $file = $dirname."/enmainheader.php"; $contents = file($file); ...

phphtml

Navigation bar stays concealed on mobile devices until manually dragged down with a touch

I am in the process of creating a mobile website (non-native) for an iPhone 4. I want to include a "header" that is 80 pixels high and 100% wide, but remains hidden until the user swipes down on the screen. I found a helpful article that almost meets my n ...

htmlcssjquery-mobilemobile

Is there a way to verify the existence of an element based on its class name?

In the title of my question, I mentioned that my element lacks an id attribute. So how can I determine if it exists or not? Here is the HTML code: <div class="classname">something</div> Note1: If there was an id attribute like this: var el ...

javascriptjqueryhtml

Leveraging the power of the Twitter API to integrate real-time tweets into custom code

Looking for an API that can transform a tweet from Twitter into a string format suitable for integration into a program or website. Any recommendations? ...

javascriptjqueryhtmlapitwitter

What is the method for saving background color and font size preferences in local storage using HTML?

I want to give visitors to my site the option to customize the background color and text size. Can their preferences be saved in local storage? If so, could you share some HTML code to make this possible? ...

phphtml

Exploring nested selection with css and utilizing the ::focus pseudo class

Is it possible, using CSS, to target the helpTextInvalid class when the div element with the selectize-input class is in focus? <html> <head> <body> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/lib ...

javascriptcssfocus

The image is not properly aligned with the background image

I'm currently working on a page design using bootstrap and css where I want images to fade and reveal the background when hovered over. The challenge I'm facing is that although all images are set to 100px in size, there is white space visible ar ...

htmlcssimagetwitter-bootstrap

Set the height of the last child element to 100% in the CSS

Seeking assistance to adjust the height of the final list item to 100% in order to match the varying height of the right-floated div. ul.menu li:last-child {height:100%} Here is an example of my current situation: http://jsfiddle.net/kvtV8/1/ Any help ...

htmlcss

CSS not working when attempting to override Angular (13) Material file

In my Angular (13) application with Material, I have developed a CSS file specifically for overriding certain Material styles. This CSS file is imported into the styles.scss file as the last line. However, despite importing the external file, the CSS def ...

cssangularangular-material

Adjust Image Width to Full - Bootstrap

I am having trouble creating a full-width header using Bootstrap v5. Despite searching the site, I have not been able to find a solution that works for me. *{ box-sizing: border-box; font-size: 16px; } .no-padding { padding-l ...

htmlcsstwitter-bootstrap