浮动在页面上并用作锚点的按钮

Question

我在表单上放置了浮动按钮作为锚点（页面很宽），但只显示了 1 个按钮，但应该显示 3 个按钮。

目标是何时滑动鼠标滚动条，使一个按钮分别出现在 Unit 1、Unit 2 和 Unit 3 的下方。通过单击它们，转到它们各自的会话。我没有通过 3 个按钮获得这个，只有一个按钮，这将进入页面顶部。

移动鼠标并查看按钮（仅出现一个）

$(document).ready(function(){

    window.onscroll = function() {scrollFunction()};

        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                document.getElementById("navegacao1").style.display = "block";
            } else {
                document.getElementById("navegacao1").style.display = "none";
            }
        }

        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                document.getElementById("navegacao2").style.display = "block";
            } else {
                document.getElementById("navegacao2").style.display = "none";
            }
        }

        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                document.getElementById("navegacao3").style.display = "block";
            } else {
                document.getElementById("navegacao3").style.display = "none";
            }
        }

        function anconrau1() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }

        function anconrau2() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }

        function anconrau3() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }

});

.sessao-unidade {
    padding-top: 11px;
    height: 45px;
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.42857143;
    text-align: center;
    color: #fff;
    background-color: rgb(66, 139, 202);
    border: 0px solid rgb(177, 177, 177);
    margin-bottom: 10px;
}

.sessao-titulos {
    display: block;
    width: 100%;
    color: rgb(27, 80, 124);
    background-color: #b4d5f1;
    border-color: #357ebd;
    padding: 6px 12px;
    margin-bottom: 10px;
    margin-top: 2px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border-radius: 2px;
    overflow: visible;
    text-transform: uppercase;
    
}

.sessao-titulos:hover, .sessao-titulos:active, .sessao-titulos:visited, .sessao-titulos:focus{
    text-decoration: none;
}

.flutuante{
    display: none;
    position: fixed;
    z-index: 9999;
    background-color: #e82222;
    color: white;
    cursor: pointer;
    padding: 5px;
    border-radius: 2px;
    border: none;
    font-size: 12px;
}

#navegacao1 {
    bottom: 15px;
    right: 15px;
  }

  #navegacao2 {
    bottom: 30px;
    right: 15px;
  }

  #navegacao3 {
    bottom: 60px;
    right: 15px;
  }
  
  #navegacao1:hover, #navegacao2:hover, #navegacao3:hover {
    background-color: #164b79;
    text-decoration: none;
  }

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="flutuante" onclick="anconrau1()" id="navegacao1" title="Ir ao topo">Unity 1</a>
<a class="flutuante" onclick="anconrau2()" id="navegacao2" title="Ir ao topo">Unity 2</a>
<a class="flutuante" onclick="anconrau3()" id="navegacao3" title="Ir ao topo">Unity 3</a>

<div id="div-unidades">

    <div id="unidade1">

            <div class="row">
                <div class="col-md-12">
                    <span class="sessao-unidade">
                        Unity 1
                    </span>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u1-conteudo-aulas">
                        Classrooms
                    </a>
                </div>
            </div>

            <div class="collapse" id="u1-conteudo-aulas">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="u1-data-aula">Class number:</label>
                            <input type="number" class="form-control" name="u1-data-aula" id="u1-data-aula">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="u1-data-aula">Classroom Date:</label>
                            <input type="date" class="form-control" name="u1-data-aula" id="u1-data-aula">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="u1-tipo-aula">Classroom Type:</label>
                            <select name="" id="u1-tipo-aula" class="form-control">
                                <option hidden="true">Select item</option>
                                <option value="">Presential</option>
                                <option value="">Virtual</option>
                            </select>
                        </div>
                    </div>
                </div>


            <div class="u1-foruns-discussao">
                <div class="row">
                    <div class="col-md-12">
                            <a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u1-conteudo-foruns">
                                Unit Discussion Forum
                            </a>
                    </div>
                </div>

                <div class="collapse" id="u1-conteudo-foruns">
                <div class="row">
                    <div class="col-md-5">
                        <div class="form-group">
                            <label for="u1-objetivo-forum">Forum Objective</label>
                            <input type="text" class="form-control" name="u1-objetivo-forum" id="u1-objetivo-forum">
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="u1-ativacao-forum">Activation period for the unit:</label>
                            <input type="date" class="form-control" name="u1-ativacao-forum" id="u1-ativacao-forum">
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="u1-avaliacao-forum">Evaluation:</label>
                            <select name="u1-avaliacao-forum" id="u1-avaliacao-forum" class="form-control">
                                <option hidden="true">Select item</option>
                                <option value="">Not rated yet</option>
                                <option value="">With note</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-1">
                        <div class="form-group">
                            <label for="u1-peso-forum">Weight (%):</label>
                            <input type="number" class="form-control" name="u1-peso-forum" id="u1-peso-forum" step="1" min="0" max="100">
                        </div>
                    </div>
                </div> 
            </div>
            </div>

            <div class="u1-demais-ferramentas">
                <div class="row">
                    <div class="col-md-12">
                        <a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u1-conteudo-wiki">
                            Other tools
                        </a>
                    </div>
                </div>

            <div class="collapse" id="u1-conteudo-wiki">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="u1-possui-wiki">Does the unit have a Wiki?</label>
                            <select name="" id="u1-possui-wiki" class="form-control">
                                <option hidden="true">Select item</option>
                                <option value="">Yes</option>
                                <option value="">No</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
    </div>
    
    <!--UNIDADE 2 -->
    <div id="unidade2">

            <div class="row">
                <div class="col-md-12">
                    <span class="sessao-unidade">
                        Unity 2
                    </span>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u2-conteudo-aulas">
                        Classrooms
                    </a>
                </div>
            </div>

            <div class="collapse" id="u2-conteudo-aulas">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="u2-data-aula">Class number:</label>
                            <input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="u2-data-aula">Classroom Date:</label>
                            <input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="u2-tipo-aula">Classroom Type:</label>
                            <select name="" id="u2-tipo-aula" class="form-control">
                                <option hidden="true">Select item</option>
                                <option value="">Presential</option>
                                <option value="">Virtual</option>
                            </select>
                        </div>
                    </div>
                </div>

            <!-- FORUNS DE DISCUSSÃO DA UNIDADE -->

            <div class="u2-foruns-discussao">
                <div class="row">
                    <div class="col-md-12">
                            <a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u2-conteudo-foruns">
                                Unit Discussion Forum
                            </a>
                    </div>
                </div>

                <div class="collapse" id="u2-conteudo-foruns">
                <div class="row">
                    <div class="col-md-5">
                        <div class="form-group">
                            <label for="u2-objetivo-forum">Forum Objective</label>
                            <input type="text" class="form-control" name="u2-objetivo-forum" id="u2-objetivo-forum">
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="u2-ativacao-forum">Activation period for the unit:</label>
                            <input type="date" class="form-control" name="u2-ativacao-forum" id="u2-ativacao-forum">
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="u2-avaliacao-forum">Evaluation:</label>
                            <select name="u2-avaliacao-forum" id="u2-avaliacao-forum" class="form-control">
                                <option hidden="true">Select item</option>
                                <option value="">Not rated yet</option>
                                <option value="">With note</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-1">
                        <div class="form-group">
                            <label for="u2-peso-forum">Weight (%):</label>
                            <input type="number" class="form-control" name="u2-peso-forum" id="u2-peso-forum" step="1" min="0" max="100">
                        </div>
                    </div>
                </div>
            </div>
            </div>

            <!-- Other tools -->

            <div class="u2-demais-ferramentas">
                <div class="row">
                    <div class="col-md-12">
                        <a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u2-conteudo-wiki">
                            Other tools
                        </a>
                    </div>
                </div>

            <div class="collapse" id="u2-conteudo-wiki">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="u2-possui-wiki">Does the unit have a Wiki?</label>
                            <select name="" id="u2-possui-wiki" class="form-control">
                                <option hidden="true">Select item</option>
                                <option value="">Yes</option>
                                <option value="">No</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
    </div>
    
    <!--UNIDADE 3 -->
    <div id="unidade3">

        <div class="row">
            <div class="col-md-12">
                <span class="sessao-unidade">
                    Unity 3
                </span>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u3-conteudo-aulas">
                    Classrooms
                </a>
            </div>
        </div>

        <div class="collapse" id="u3-conteudo-aulas">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="u3-data-aula">Class number:</label>
                        <input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="u3-data-aula">Classroom Date:</label>
                        <input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="u3-tipo-aula">Classroom Type:</label>
                        <select name="" id="u3-tipo-aula" class="form-control">
                            <option hidden="true">Select item</option>
                            <option value="">Presential</option>
                            <option value="">Virtual</option>
                        </select>
                    </div>
                </div>
            </div>

        <!-- FORUNS DE DISCUSSÃO DA UNIDADE -->

        <div class="u3-foruns-discussao">
            <div class="row">
                <div class="col-md-12">
                        <a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u3-conteudo-foruns">
                            Unit Discussion Forum
                        </a>
                </div>
            </div>

            <div class="collapse" id="u3-conteudo-foruns">
            <div class="row">
                <div class="col-md-5">
                    <div class="form-group">
                        <label for="u3-objetivo-forum">Forum Objective</label>
                        <input type="text" class="form-control" name="u3-objetivo-forum" id="u3-objetivo-forum">
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="u3-ativacao-forum">Activation period for the unit:</label>
                        <input type="date" class="form-control" name="u3-ativacao-forum" id="u3-ativacao-forum">
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="u3-avaliacao-forum">Evaluation:</label>
                        <select name="u3-avaliacao-forum" id="u3-avaliacao-forum" class="form-control">
                            <option hidden="true">Select item</option>
                            <option value="">Not rated yet</option>
                            <option value="">With note</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-1">
                    <div class="form-group">
                        <label for="u3-peso-forum">Weight (%):</label>
                        <input type="number" class="form-control" name="u3-peso-forum" id="u3-peso-forum" step="1" min="0" max="100">
                    </div>
                </div>
            </div>
        </div>
        </div>

        <div class="u3-demais-ferramentas">
            <div class="row">
                <div class="col-md-12">
                    <a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u3-conteudo-wiki">
                        Other tools
                    </a>
                </div>
            </div>

        <div class="collapse" id="u3-conteudo-wiki">
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="u3-possui-wiki">Does the unit have a Wiki?</label>
                        <select name="" id="u3-possui-wiki" class="form-control">
                            <option hidden="true">Select item</option>
                            <option value="">Yes</option>
                            <option value="">No</option>
                        </select>
                    </div>
                </div>
            </div>
        </div> 
    </div>
</div>
</div>

Answer 1

这里的问题是您将函数scrollfunction 覆盖了三次，所以唯一使用的是最后一个定义的函数。

如果 scrollTop 值大于 20，您还应该根据每个元素检查所有三个函数的 scrollTop 值。

Answer 2

尝试使用$('#navegacao1,#navegacao2,#navegacao3').click(function(){，而不是使用单独的函数

$(document).ready(function(){

    window.onscroll = function() {scrollFunction()};

        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                document.getElementById("navegacao1").style.display = "block";
                document.getElementById("navegacao2").style.display = "none";
                document.getElementById("navegacao3").style.display = "none";
                     
 } else if ((document.body.scrollTop > 20 && document.body.scrollTop > 20 )||  (document.body.scrollTop < 30 && document.body.scrollTop < 30)) {
            document.getElementById("navegacao2").style.display = "block";
                           document.getElementById("navegacao1").style.display = "none";
                           document.getElementById("navegacao3").style.display = "none";
       }
            else if ((document.body.scrollTop < 30 && document.body.scrollTop > 30 )||  (document.body.scrollTop <50 && document.body.scrollTop <50)) {
                document.getElementById("navegacao3").style.display = "block";
      document.getElementById("navegacao1").style.display = "none";          document.getElementById("navegacao2").style.display = "none";
                }
                
            
        }

        

$(function(){
        $('#navegacao1,#navegacao2,#navegacao3').click(function(){
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        });
       
    });

});

.sessao-unidade {
    padding-top: 11px;
    height: 45px;
    display: block;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase;
    line-height: 1.42857143;
    text-align: center;
    color: #fff;
    background-color: rgb(66, 139, 202);
    border: 0px solid rgb(177, 177, 177);
    margin-bottom: 10px;
}

.sessao-titulos {
    display: block;
    width: 100%;
    color: rgb(27, 80, 124);
    background-color: #b4d5f1;
    border-color: #357ebd;
    padding: 6px 12px;
    margin-bottom: 10px;
    margin-top: 2px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    border-radius: 2px;
    overflow: visible;
    text-transform: uppercase;
    
}

.sessao-titulos:hover, .sessao-titulos:active, .sessao-titulos:visited, .sessao-titulos:focus{
    text-decoration: none;
}

.flutuante{
    display: none;
    position: fixed;
    z-index: 9999;
    background-color: #e82222;
    color: white;
    cursor: pointer;
    padding: 5px;
    border-radius: 2px;
    border: none;
    font-size: 12px;
}

#navegacao1 {
    bottom: 15px;
    right: 15px;
  }

  #navegacao2 {
    bottom: 30px;
    right: 15px;
  }

  #navegacao3 {
    bottom: 60px;
    right: 15px;
  }
  
  #navegacao1:hover, #navegacao2:hover, #navegacao3:hover {
    background-color: #164b79;
    text-decoration: none;
  }

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<a class="flutuante"  id="navegacao1" title="Ir ao topo">Unity 1</a>
<a class="flutuante"  id="navegacao2" title="Ir ao topo">Unity 2</a>
<a class="flutuante"  id="navegacao3" title="Ir ao topo">Unity 3</a>

<div id="div-unidades" style="height:1000px">

    <div id="unidade1">

            <div class="row">
                <div class="col-md-12">
                    <span class="sessao-unidade">
                        Unity 1
                    </span>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u1-conteudo-aulas">
                        Classrooms
                    </a>
                </div>
            </div>

            <div class="collapse" id="u1-conteudo-aulas">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="u1-data-aula">Class number:</label>
                            <input type="number" class="form-control" name="u1-data-aula" id="u1-data-aula">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="u1-data-aula">Classroom Date:</label>
                            <input type="date" class="form-control" name="u1-data-aula" id="u1-data-aula">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="u1-tipo-aula">Classroom Type:</label>
                            <select name="" id="u1-tipo-aula" class="form-control">
                                <option hidden="true">Select item</option>
                                <option value="">Presential</option>
                                <option value="">Virtual</option>
                            </select>
                        </div>
                    </div>
                </div>


            <div class="u1-foruns-discussao">
                <div class="row">
                    <div class="col-md-12">
                            <a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u1-conteudo-foruns">
                                Unit Discussion Forum
                            </a>
                    </div>
                </div>

                <div class="collapse" id="u1-conteudo-foruns">
                <div class="row">
                    <div class="col-md-5">
                        <div class="form-group">
                            <label for="u1-objetivo-forum">Forum Objective</label>
                            <input type="text" class="form-control" name="u1-objetivo-forum" id="u1-objetivo-forum">
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="u1-ativacao-forum">Activation period for the unit:</label>
                            <input type="date" class="form-control" name="u1-ativacao-forum" id="u1-ativacao-forum">
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="u1-avaliacao-forum">Evaluation:</label>
                            <select name="u1-avaliacao-forum" id="u1-avaliacao-forum" class="form-control">
                                <option hidden="true">Select item</option>
                                <option value="">Not rated yet</option>
                                <option value="">With note</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-1">
                        <div class="form-group">
                            <label for="u1-peso-forum">Weight (%):</label>
                            <input type="number" class="form-control" name="u1-peso-forum" id="u1-peso-forum" step="1" min="0" max="100">
                        </div>
                    </div>
                </div> 
            </div>
            </div>

            <div class="u1-demais-ferramentas">
                <div class="row">
                    <div class="col-md-12">
                        <a class="sessao-titulos" data-toggle="collapse" href="#u1-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u1-conteudo-wiki">
                            Other tools
                        </a>
                    </div>
                </div>

            <div class="collapse" id="u1-conteudo-wiki">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="u1-possui-wiki">Does the unit have a Wiki?</label>
                            <select name="" id="u1-possui-wiki" class="form-control">
                                <option hidden="true">Select item</option>
                                <option value="">Yes</option>
                                <option value="">No</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
    </div>
    
    <!--UNIDADE 2 -->
    <div id="unidade2">

            <div class="row">
                <div class="col-md-12">
                    <span class="sessao-unidade">
                        Unity 2
                    </span>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u2-conteudo-aulas">
                        Classrooms
                    </a>
                </div>
            </div>

            <div class="collapse" id="u2-conteudo-aulas">
                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="u2-data-aula">Class number:</label>
                            <input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="u2-data-aula">Classroom Date:</label>
                            <input type="date" class="form-control" name="u2-data-aula" id="u2-data-aula">
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group">
                            <label for="u2-tipo-aula">Classroom Type:</label>
                            <select name="" id="u2-tipo-aula" class="form-control">
                                <option hidden="true">Select item</option>
                                <option value="">Presential</option>
                                <option value="">Virtual</option>
                            </select>
                        </div>
                    </div>
                </div>

            <!-- FORUNS DE DISCUSSÃO DA UNIDADE -->

            <div class="u2-foruns-discussao">
                <div class="row">
                    <div class="col-md-12">
                            <a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u2-conteudo-foruns">
                                Unit Discussion Forum
                            </a>
                    </div>
                </div>

                <div class="collapse" id="u2-conteudo-foruns">
                <div class="row">
                    <div class="col-md-5">
                        <div class="form-group">
                            <label for="u2-objetivo-forum">Forum Objective</label>
                            <input type="text" class="form-control" name="u2-objetivo-forum" id="u2-objetivo-forum">
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="u2-ativacao-forum">Activation period for the unit:</label>
                            <input type="date" class="form-control" name="u2-ativacao-forum" id="u2-ativacao-forum">
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="u2-avaliacao-forum">Evaluation:</label>
                            <select name="u2-avaliacao-forum" id="u2-avaliacao-forum" class="form-control">
                                <option hidden="true">Select item</option>
                                <option value="">Not rated yet</option>
                                <option value="">With note</option>
                            </select>
                        </div>
                    </div>

                    <div class="col-md-1">
                        <div class="form-group">
                            <label for="u2-peso-forum">Weight (%):</label>
                            <input type="number" class="form-control" name="u2-peso-forum" id="u2-peso-forum" step="1" min="0" max="100">
                        </div>
                    </div>
                </div>
            </div>
            </div>

            <!-- Other tools -->

            <div class="u2-demais-ferramentas">
                <div class="row">
                    <div class="col-md-12">
                        <a class="sessao-titulos" data-toggle="collapse" href="#u2-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u2-conteudo-wiki">
                            Other tools
                        </a>
                    </div>
                </div>

            <div class="collapse" id="u2-conteudo-wiki">
                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="u2-possui-wiki">Does the unit have a Wiki?</label>
                            <select name="" id="u2-possui-wiki" class="form-control">
                                <option hidden="true">Select item</option>
                                <option value="">Yes</option>
                                <option value="">No</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div> 
        </div>
    </div>
    </div>
    
    <!--UNIDADE 3 -->
    <div id="unidade3">

        <div class="row">
            <div class="col-md-12">
                <span class="sessao-unidade">
                    Unity 3
                </span>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-aulas" role="button" aria-expanded="false" aria-controls="u3-conteudo-aulas">
                    Classrooms
                </a>
            </div>
        </div>

        <div class="collapse" id="u3-conteudo-aulas">
            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label for="u3-data-aula">Class number:</label>
                        <input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="u3-data-aula">Classroom Date:</label>
                        <input type="date" class="form-control" name="u3-data-aula" id="u3-data-aula">
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        <label for="u3-tipo-aula">Classroom Type:</label>
                        <select name="" id="u3-tipo-aula" class="form-control">
                            <option hidden="true">Select item</option>
                            <option value="">Presential</option>
                            <option value="">Virtual</option>
                        </select>
                    </div>
                </div>
            </div>

        <!-- FORUNS DE DISCUSSÃO DA UNIDADE -->

        <div class="u3-foruns-discussao">
            <div class="row">
                <div class="col-md-12">
                        <a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-foruns" role="button" aria-expanded="false" aria-controls="u3-conteudo-foruns">
                            Unit Discussion Forum
                        </a>
                </div>
            </div>

            <div class="collapse" id="u3-conteudo-foruns">
            <div class="row">
                <div class="col-md-5">
                    <div class="form-group">
                        <label for="u3-objetivo-forum">Forum Objective</label>
                        <input type="text" class="form-control" name="u3-objetivo-forum" id="u3-objetivo-forum">
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="u3-ativacao-forum">Activation period for the unit:</label>
                        <input type="date" class="form-control" name="u3-ativacao-forum" id="u3-ativacao-forum">
                    </div>
                </div>

                <div class="col-md-3">
                    <div class="form-group">
                        <label for="u3-avaliacao-forum">Evaluation:</label>
                        <select name="u3-avaliacao-forum" id="u3-avaliacao-forum" class="form-control">
                            <option hidden="true">Select item</option>
                            <option value="">Not rated yet</option>
                            <option value="">With note</option>
                        </select>
                    </div>
                </div>

                <div class="col-md-1">
                    <div class="form-group">
                        <label for="u3-peso-forum">Weight (%):</label>
                        <input type="number" class="form-control" name="u3-peso-forum" id="u3-peso-forum" step="1" min="0" max="100">
                    </div>
                </div>
            </div>
        </div>
        </div>

        <div class="u3-demais-ferramentas">
            <div class="row">
                <div class="col-md-12">
                    <a class="sessao-titulos" data-toggle="collapse" href="#u3-conteudo-wiki" role="button" aria-expanded="false" aria-controls="u3-conteudo-wiki">
                        Other tools
                    </a>
                </div>
            </div>

        <div class="collapse" id="u3-conteudo-wiki">
            <div class="row">
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="u3-possui-wiki">Does the unit have a Wiki?</label>
                        <select name="" id="u3-possui-wiki" class="form-control">
                            <option hidden="true">Select item</option>
                            <option value="">Yes</option>
                            <option value="">No</option>
                        </select>
                    </div>
                </div>
            </div>
        </div> 
    </div>
</div>
</div>