CODEWITHSUNDEEP
javascripthtmlcssdjango
Mahdi Jaber
Mahdi Jaber

Reputation: 231

Toggle function not working the div element doesn't appear

I am doing a project on django and I am working on a template and I want the div element to toggle between hiding and showing but it isn't working. I took the function from a working template but for some reason it doesn't work in django project. I just can't figure a solution for the problem. Here is the template:

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">


    <title>Admin Home Page</title>

    {% load staticfiles %}

    <!-- Bootstrap core CSS -->
    <link href="{% static 'Boards/Homepage/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{% static 'Boards/Homepage/css/modern-business.css' %}" rel="stylesheet">
    <style>
      #ManageUsers {
        display: none;
      }
    </style>

    <script type="text/javascript">
      function ToggleHide(id) {
        var divelement = document.getElementById(id);

        if (divelement.style.display === 'none')
          divelement.style.display = 'block';
        else
          divelement.style.display = 'none';
      }
    </script>
  </head>

  <body>

    <!-- Navigation -->
    <nav class="navbar fixed-top navbar-expand-lg fixed-top" style="background-color: #0b0849;">
      <div class="container">
        <a class="navbar-brand" href="#" style="margin-left: -120px; font-family: 'Sofia';font-size: 22px;" ><i class="fa fa-flash" style="font-size:24px"></i> Drello Admin</a>
        <div class="search-container">
          <form action="/action_page.php">
            <input type="text" placeholder="Search.." name="search">
            <button type="submit"><i class="fa fa-search"></i></button>
          </form>
        </div>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li>
              <a class="navbar-brand" href="index.html"><i class="fa fa-home" style="font-size:24px;"></i> Home</a>
            </li>
            <li class="nav-item dropdown" style="margin-right: -120px;">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> My Profile</a>

              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                <a class="dropdown-item" href="full-width.html" style="color: #0b0849; margin-bottom: 10px;"><i class="fa fa-user-circle"></i> Profile</a>
                <a class="dropdown-item" href="full-width.html" style="color: #0b0849; margin-bottom: 10px;"><i class="fa fa-user-plus"></i> Add User</a>
                <a class="dropdown-item" href="sidebar.html" style="color: #0b0849; margin-bottom: 10px;"><i class="fa fa-bell"></i> Sidebar Page</a>
                <a class="dropdown-item" href="#" style="color: #0b0849; margin-bottom: 10px;"><i class="fa fa-power-off"></i> Logout</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <br>
    <br>

    <!-- Page Content -->
    <div class="container">
      <!-- Page Heading -->
      <h2 class="my-4" style="margin-left: -50px; font-size: 16px; font-weight: 700; display: inline-block; color: #0b0849;"><i class="fa fa-address-book-o"></i><a href = "" onclick="ToggleHide('ManageUsers');">  Manage Users </a> </h2>
      <div class="row" style="margin-left: -45px;">
        <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
        </div>
      </div>
      <div id="ManageUsers">
        <table style="width:50%">
          <tr>
            <th>User Name</th>
          </tr>
          <tr>
            <td>Zeinab Awada</td>
            <td><a href = "#" > <button>Edit User</button></a><td>
          </tr>
          <tr>
            <td>Mahdi Jaber </td>
            <td><a href = "#" > <button>Edit User</button></a><td>
          </tr>
        </table>
      </div>
      <div class="container">
        <!-- Page Heading -->
        <h2 class="my-4" style="margin-left: -40px; font-size: 16px; font-weight: 700; display: inline-block; color: #0b0849; padding-top: 20px;"><i class="fa fa-bars"></i> <a href = "" onclick="ToggleHide('ManageUsers');"> Manage Boards</a></h2>
      </div>
    </div>
    <!-- /.container -->

    <!-- Bootstrap core JavaScript -->

  </body>

</html>

Upvotes: 0

Views: 614

Answers (2)

alacom
alacom

Reputation: 236

Since you are using CSS to manipulate your divs initial display, javascript will not pick up this style using

divelement.style.display

Instead you have two options.

1.Set the style in the div like so

<div style=display:none>

And fix your anchor tag like so 

<a href="#" onclick="ToggleHide('ManageUsers');">  Manage Users </a>

Then your code will work right away.

  1. Get the computed style like so.

function ToggleHide(id) { var divelement = document.getElementById(id); var displayStyle = divelement.currentStyle ? divelement.currentStyle.display : getComputedStyle(divelement, null).display;
if (displayStyle === 'none') divelement.style.display = 'block'; else divelement.style.display = 'none'; }

Either way, you need to set your anchor href to # because you will try to navigate away when you click the link.

Hope this answers your question.

Upvotes: 0

Asons
Asons

Reputation: 87262

If you change your a to a e.g. span it works. That, or you need to use preventDefault() to prevent an anchors default behavior.

Stack snippet - changed to span

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">


    <title>Admin Home Page</title>
    {% load staticfiles %}
    <!-- Bootstrap core CSS -->
    <link href="{% static 'Boards/Homepage/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="{% static 'Boards/Homepage/css/modern-business.css' %}" rel="stylesheet">
     <style>
            #ManageUsers{
                           display :none;
                        }
    </style>
      <script type="text/javascript">
            function ToggleHide(id) {

                var divelement = document.getElementById(id);

                    if(divelement.style.display === 'none')
                        divelement.style.display = 'block';
                    else
                        divelement.style.display = 'none';
            }
    </script>
  </head>

  <body>

    <!-- Navigation -->
    <nav class="navbar fixed-top navbar-expand-lg fixed-top" style="background-color: #0b0849;">
      <div class="container">
        <a class="navbar-brand" href="#" style="margin-left: -120px; font-family: 'Sofia';font-size: 22px;" ><i class="fa fa-flash" style="font-size:24px"></i> Drello Admin</a>
        <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li>
              <a class="navbar-brand" href="index.html"><i class="fa fa-home" style="font-size:24px;"></i> Home</a>
            </li>
            <li class="nav-item dropdown" style="margin-right: -120px;">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> My Profile</a>

              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                <a class="dropdown-item" href="full-width.html" style="color: #0b0849; margin-bottom: 10px;"><i class="fa fa-user-circle"></i> Profile</a>
                <a class="dropdown-item" href="full-width.html" style="color: #0b0849; margin-bottom: 10px;"><i class="fa fa-user-plus"></i> Add User</a>
                <a class="dropdown-item" href="sidebar.html" style="color: #0b0849; margin-bottom: 10px;"><i class="fa fa-bell"></i> Sidebar Page</a>
                <a class="dropdown-item" href="#" style="color: #0b0849; margin-bottom: 10px;"><i class="fa fa-power-off"></i> Logout</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <br>
    <br>
    <!-- Page Content -->
    <div class="container">
      <!-- Page Heading -->
        <h2 class="my-4" style="margin-left: -50px; font-size: 16px; font-weight: 700; display: inline-block; color: #0b0849;"><i class="fa fa-address-book-o"></i><span onclick="ToggleHide('ManageUsers');">  Manage Users </span> </h2>
      <div class="row" style="margin-left: -45px;">
        <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
      </div>
      </div>
        <div id="ManageUsers">
            <table style="width:50%">
  <tr>
    <th>User Name</th>
  </tr>
  <tr>
    <td>Zeinab Awada</td>
    <td><a href = "#" > <button>Edit User</button></a><td>


  </tr>
  <tr>
    <td>Mahdi Jaber </td>
    <td><a href = "#" > <button>Edit User</button></a><td>


  </tr>
</table>
        </div>
        <div class="container">
      <!-- Page Heading -->
      <h2 class="my-4" style="margin-left: -40px; font-size: 16px; font-weight: 700; display: inline-block; color: #0b0849; padding-top: 20px;"><i class="fa fa-bars"></i> <span onclick="ToggleHide('ManageUsers');"> Manage Boards</span></h2>


      </div>
    </div>
    <!-- /.container -->

    <!-- Bootstrap core JavaScript -->


  </body>

</html>

Stack snippet - changed onlick and added preventDefault()

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">


    <title>Admin Home Page</title>
    {% load staticfiles %}
    <!-- Bootstrap core CSS -->
    <link href="{% static 'Boards/Homepage/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="{% static 'Boards/Homepage/css/modern-business.css' %}" rel="stylesheet">
     <style>
            #ManageUsers{
                           display :none;
                        }
    </style>
      <script type="text/javascript">
            function ToggleHide(e) {
            
                e.preventDefault();

                var divelement = document.getElementById(this);

                    if(divelement.style.display === 'none')
                        divelement.style.display = 'block';
                    else
                        divelement.style.display = 'none';
            }
    </script>
  </head>

  <body>

    <!-- Navigation -->
    <nav class="navbar fixed-top navbar-expand-lg fixed-top" style="background-color: #0b0849;">
      <div class="container">
        <a class="navbar-brand" href="#" style="margin-left: -120px; font-family: 'Sofia';font-size: 22px;" ><i class="fa fa-flash" style="font-size:24px"></i> Drello Admin</a>
        <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li>
              <a class="navbar-brand" href="index.html"><i class="fa fa-home" style="font-size:24px;"></i> Home</a>
            </li>
            <li class="nav-item dropdown" style="margin-right: -120px;">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownBlog" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> My Profile</a>

              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownBlog">
                <a class="dropdown-item" href="full-width.html" style="color: #0b0849; margin-bottom: 10px;"><i class="fa fa-user-circle"></i> Profile</a>
                <a class="dropdown-item" href="full-width.html" style="color: #0b0849; margin-bottom: 10px;"><i class="fa fa-user-plus"></i> Add User</a>
                <a class="dropdown-item" href="sidebar.html" style="color: #0b0849; margin-bottom: 10px;"><i class="fa fa-bell"></i> Sidebar Page</a>
                <a class="dropdown-item" href="#" style="color: #0b0849; margin-bottom: 10px;"><i class="fa fa-power-off"></i> Logout</a>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <br>
    <br>
    <!-- Page Content -->
    <div class="container">
      <!-- Page Heading -->
        <h2 class="my-4" style="margin-left: -50px; font-size: 16px; font-weight: 700; display: inline-block; color: #0b0849;"><i class="fa fa-address-book-o"></i><a href = "" onclick="ToggleHide.apply('ManageUsers',arguments);">  Manage Users </a> </h2>
      <div class="row" style="margin-left: -45px;">
        <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
      </div>
      </div>
        <div id="ManageUsers">
            <table style="width:50%">
  <tr>
    <th>User Name</th>
  </tr>
  <tr>
    <td>Zeinab Awada</td>
    <td><a href = "#" > <button>Edit User</button></a><td>


  </tr>
  <tr>
    <td>Mahdi Jaber </td>
    <td><a href = "#" > <button>Edit User</button></a><td>


  </tr>
</table>
        </div>
        <div class="container">
      <!-- Page Heading -->
      <h2 class="my-4" style="margin-left: -40px; font-size: 16px; font-weight: 700; display: inline-block; color: #0b0849; padding-top: 20px;"><i class="fa fa-bars"></i> <a href = "" onclick="ToggleHide.apply('ManageUsers',arguments);"> Manage Boards</a></h2>


      </div>
    </div>
    <!-- /.container -->

    <!-- Bootstrap core JavaScript -->


  </body>

</html>

I also recommend to avoid using inline script and instead utilize event listeners, and do something like this to attach the click event

document.querySelector('a css-selector').addEventListener('click', function(e) {

    // e holds the event and this holds the element that were clicked on

});

Upvotes: 1

Related Questions