Link tag on Html5 in the wrong place on bootstrap

Question

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<link rel="stylesheet" href="/static/scrapy/style.css">

<div class="container w-50">
    <h1 class="display-4">Scrapy Data</h1>
    <!-- List group -->
    <div class="col-8 mx-auto my-5 py-5" id="Group">
        <div class="list-group">






                <div>
                    <a id="Tipos-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseTipos" role="button" aria-expanded="true" aria-controls="collapseTipos">
                        <div class="d-flex align-items-center">
                            <span>Tipos</span>
                            <div id="spinnerTipos" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <a class="btn btn-block btn-outline-success collapse" id="collapseTipos" data-parent="#Group" role="button" href="/scrapy/scrapy-tipos" onclick="disableLinks(); showSpinners('#spinnerTipos');">Scrapy</a>

                    </a>
                </div>







                <div>
                    <a id="Habilidades-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseHabilidades" role="button" aria-expanded="true" aria-controls="collapseHabilidades">
                        <div class="d-flex align-items-center">
                            <span>Habilidades</span>
                            <div id="spinnerHabilidades" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <a class="btn btn-block btn-outline-success collapse" id="collapseHabilidades" data-parent="#Group" role="button" href="/scrapy/scrapy-habilidades" onclick="disableLinks(); showSpinners('#spinnerHabilidades');">Scrapy</a>

                    </a>
                </div>







                <div>
                    <a id="Categorias-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseCategorias" role="button" aria-expanded="true" aria-controls="collapseCategorias">
                        <div class="d-flex align-items-center">
                            <span>Categorias</span>
                            <div id="spinnerCategorias" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <a class="btn btn-block btn-outline-success collapse" id="collapseCategorias" data-parent="#Group" role="button" href="/scrapy/scrapy-categorias" onclick="disableLinks(); showSpinners('#spinnerCategorias');">Scrapy</a>

                    </a>
                </div>







                <div>
                    <a id="Pokemons-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapsePokemons" role="button" aria-expanded="true" aria-controls="collapsePokemons">
                        <div class="d-flex align-items-center">
                            <span>Pokemons</span>
                            <div id="spinnerPokemons" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <form class="form-inline collapse" action="index.html" method="post" id="collapsePokemons" data-parent="#Group">
                                <div class="ml-2 mt-2 form-group">
                                    <input type="text" name="idpoke" class="form-control" placeholder="Id do 1° pokémon ">
                                </div>
                                <button type="submit" class="ml-4 px-4 btn btn-outline-success" role="button" onclick="disableLinks(); showSpinners('#spinnerPokemons');">Scrapy</button>
                            </form>

                    </a>
                </div>


        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

<script type="text/javascript">
    function disableLinks() {
        $("a").addClass("disabled");
    }
    function showSpinners(arg){
        $(arg).collapse()
        $("a").collapse('hide')
    }
</script>

I was not able to create a title that referred well to the problem, but here is the explanation. I’m using these tags links with the bootstrap "btn" class, when I click on the link of cards (link tag with id [something]-link, for example Link types) the link tag inside it (with class "btn") should appear inside that card, but it appears outside, however if I switch to the tag <button> is all right, but I need to link this tag to a link, so I couldn’t use <button>. Any hint?

Answer 1

You can’t nest an element <a> within another <a>. The browser recognizes that this is wrong (because it is against the HTML specifications) and will close the first <a> to open the other by making the two separate elements, one after the other.

Indicated is to use the widget <a> as a link (using the attribute href). If this is not the function of <a> in your code, so you better use it as a button or a div.

If the problem is the cursor, just put the property in your CSS cursor: pointer in the element.

Answer 2

in the first a swap for div I believe that’s what you want:

function disableLinks() {
        $("div").addClass("disabled");
    }
    function showSpinners(arg){
        $(arg).collapse()
        $("div").collapse('hide')
    }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<link rel="stylesheet" href="/static/scrapy/style.css">

<div class="container w-50">
    <h1 class="display-4">Scrapy Data</h1>
    <!-- List group -->
    <div class="col-8 mx-auto my-5 py-5" id="Group">
        <div class="list-group">






                <div>
                    <div id="Tipos-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseTipos" role="button" aria-expanded="true" aria-controls="collapseTipos">
                        <div class="d-flex align-items-center">
                            <span>Tipos</span>
                            <div id="spinnerTipos" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <a class="btn btn-block btn-outline-success collapse" id="collapseTipos" data-parent="#Group" role="button" href="/scrapy/scrapy-tipos" onclick="disableLinks(); showSpinners('#spinnerTipos');">Scrapy</a>

                    </div>
                </div>







                <div>
                    <div id="Habilidades-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseHabilidades" role="button" aria-expanded="true" aria-controls="collapseHabilidades">
                        <div class="d-flex align-items-center">
                            <span>Habilidades</span>
                            <div id="spinnerHabilidades" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <a class="btn btn-block btn-outline-success collapse" id="collapseHabilidades" data-parent="#Group" role="button" href="/scrapy/scrapy-habilidades" onclick="disableLinks(); showSpinners('#spinnerHabilidades');">Scrapy</a>

                    </div>
                </div>







                <div>
                    <div id="Categorias-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapseCategorias" role="button" aria-expanded="true" aria-controls="collapseCategorias">
                        <div class="d-flex align-items-center">
                            <span>Categorias</span>
                            <div id="spinnerCategorias" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <a class="btn btn-block btn-outline-success collapse" id="collapseCategorias" data-parent="#Group" role="button" href="/scrapy/scrapy-categorias" onclick="disableLinks(); showSpinners('#spinnerCategorias');">Scrapy</a>

                    </div>
                </div>







                <div>
                    <div id="Pokemons-link" class="list-group-item list-group-item-action mb-1 shadow-sm rounded-0" data-toggle="collapse" href="#collapsePokemons" role="button" aria-expanded="true" aria-controls="collapsePokemons">
                        <div class="d-flex align-items-center">
                            <span>Pokemons</span>
                            <div id="spinnerPokemons" class="collapse spinner-border spinner-border-sm text-success ml-auto" role="status" aria-hidden="true"></div>
                        </div>


                            <form class="form-inline collapse" action="index.html" method="post" id="collapsePokemons" data-parent="#Group">
                                <div class="ml-2 mt-2 form-group">
                                    <input type="text" name="idpoke" class="form-control" placeholder="Id do 1° pokémon ">
                                </div>
                                <button type="submit" class="ml-4 px-4 btn btn-outline-success" role="button" onclick="disableLinks(); showSpinners('#spinnerPokemons');">Scrapy</button>
                            </form>

                    </div>
                </div>


        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>