Two javascript functions on the same page

Asked

Viewed 160 times

0

good morning! I have a little problem in my code and I am new in the programming area, I do not know if my doubt is this well, but, I will show you the code and describe how I want to reach my goal:

<meta charset="utf-8">
<title> aPETrecho </title>
<link rel="stylesheet" href="css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />

<!--- Codigo javascript do Login -->
<script>
    $(document).ready(function() {
        $('#login-trigger').click(function() {
            $(this).next('#login-content').slideToggle();
            $(this).toggleClass('active');

            if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
            else $(this).find('span').html('&#x25BC;')
        })
    });
</script>


    <!--- Titulo -->
    <div>
        <img src="imagens/logo_title.png">
    </div>

    <?php if (!isset($_SESSION['id'])) { ?>
        <section>
            <nav>
                <ul>
                    <li id="login">
                        <a id="login-trigger" class="" href="#">
                            Login <span>▼</span>
                        </a>
                        <div id="login-content" class="">
                            <form class="" method="POST" action="formularios/login.php">
                                <fieldset id="inputs">
                                    <input id="usuario" type="text" name="usuario" placeholder="Usuário" required>
                                    <input id="senha" type="password" name="senha" placeholder="Senha" required>
                                </fieldset>
                                <fieldset id="actions">
                                    <input type="submit" id="submit" value="Entrar">
                                </fieldset>
                            </form>
                        </div>
                    </li>
                    <li id="signup">
                        <a href="formularios/formUsuario.php">Cadastre-se!</a>
                    </li>
                </ul>
            </nav>
        </section>

    <?php } else { ?>
        <section>
            <nav>
                <ul>
                    <li id="painel">
                        <a id="painel-trigger" class="" href="">
                            Conta <span>▼</span>
                        </a>
                        <div class="painel-content">
                            <a href="usuario/pagUsuario.php">Perfil</a>
                            <a href="formularios/sair.php">Sair</a>
                        </div>
                    </li>
                </ul>
            </nav>
        </section>
    <?php } ?>

I am trying to use the script code that is in the head so that when the user is logged in, he can click on the span "Account" and open the panel with the options "Profile" and "Quit", the Login works, but the "Account" is not working! I tried to copy the script code and change the id’s, I tried to put the code inside the body, I put the code upside down, none worked! Someone can give me a light?

php javascript html dropdown span

1 answer

0

You say you have already tried to change the ids and have not worked out, but this is exactly what needs to be done:

$(document).ready(function() {
    $('#login-trigger').click(function() {
        $(this).next('#login-content').slideToggle();
        $(this).toggleClass('active');

        if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
        else $(this).find('span').html('&#x25BC;')
    })
    
    $('#painel-trigger').click(function() {
        $(this).next('#painel-content').slideToggle();
        $(this).toggleClass('active');

        if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
        else $(this).find('span').html('&#x25BC;')
    })
});
<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <title> aPETrecho </title>
  <link rel="stylesheet" href="css/index.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />

</head>

<body>
  <!--- NAVEGAÇÃO -->
  <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
    <!--- Titulo -->
    <div>
      <img src="imagens/logo_title.png">
    </div>
    <section>
      <nav>
        <ul>
          <li id="login">
            <a id="login-trigger" class="" href="#">
              Login <span>▼</span>
            </a>
            <div id="login-content" class="">
              <form class="" method="POST" action="formularios/login.php">
                <fieldset id="inputs">
                  <input id="usuario" type="text" name="usuario" placeholder="Usuário" required>
                  <input id="senha" type="password" name="senha" placeholder="Senha" required>
                </fieldset>
                <fieldset id="actions">
                  <input type="submit" id="submit" value="Entrar">
                </fieldset>
              </form>
            </div>
          </li>
          <li id="signup">
            <a href="formularios/formUsuario.php">Cadastre-se!</a>
          </li>
        </ul>
      </nav>
    </section>
    <section>
      <nav>
        <ul>
          <li id="painel">
            <a id="painel-trigger" class="" href="#">
              Conta <span>▼</span>
            </a>
            <div id="painel-content">
              <a href="usuario/pagUsuario.php">Perfil</a>
              <a href="formularios/sair.php">Sair</a>
            </div>
          </li>
        </ul>
      </nav>
    </section>
</html>

Some tips:

In your HTML you have defined login-content as an id, but painel-content is defined as a class. The # is the id selector, while the . is the class selector. If you use $('#painel-content') will not work, or use $('.painel-content'), or else define painel-content as an id.

The href of your painel-trigger is empty. If you click it, you will be redirected to another page.

Now to make code less plastered, you can also create a more generic function for your menus:

$(document).ready(function() {
    function toggle() {
        $(this).next().slideToggle();
        $(this).toggleClass('active');

        if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
        else $(this).find('span').html('&#x25BC;')
    }

    $('#login-trigger').click(toggle)
    $('#painel-trigger').click(toggle)
});
<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <title> aPETrecho </title>
  <link rel="stylesheet" href="css/index.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" />

</head>

<body>
  <!--- NAVEGAÇÃO -->
  <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
    <!--- Titulo -->
    <div>
      <img src="imagens/logo_title.png">
    </div>
    <section>
      <nav>
        <ul>
          <li id="login">
            <a id="login-trigger" class="" href="#">
              Login <span>▼</span>
            </a>
            <div id="login-content" class="">
              <form class="" method="POST" action="formularios/login.php">
                <fieldset id="inputs">
                  <input id="usuario" type="text" name="usuario" placeholder="Usuário" required>
                  <input id="senha" type="password" name="senha" placeholder="Senha" required>
                </fieldset>
                <fieldset id="actions">
                  <input type="submit" id="submit" value="Entrar">
                </fieldset>
              </form>
            </div>
          </li>
          <li id="signup">
            <a href="formularios/formUsuario.php">Cadastre-se!</a>
          </li>
        </ul>
      </nav>
    </section>
    <section>
      <nav>
        <ul>
          <li id="painel">
            <a id="painel-trigger" class="" href="#">
              Conta <span>▼</span>
            </a>
            <div id="painel-content">
              <a href="usuario/pagUsuario.php">Perfil</a>
              <a href="formularios/sair.php">Sair</a>
            </div>
          </li>
        </ul>
      </nav>
    </section>
</html>

  • It’s always the tiniest detail that gets us in the way, right? hahaha Thank you very much, I managed to solve the problem!

Browser other questions tagged php javascript html dropdown span

You are not signed in. Login or sign up in order to post.