title: How do you toggle multiple data targets and toggles using bootstrap html data toggle
body: <p>I am writing code for a animated hamburger icon for the bootstrap navbar, but need to toggle both the hamburger icon and the bootstrap repsonsive navbar. So is there some code or some way to toggle both pieces of data at different ids. Also, I can't use javascript because the bootstrap navbar doesn't have the sliding animation when toggling it through javascript.  </p>
  
  <p>Here is the code I have already for targeting the navbar collapse feature.</p>
  
  <pre><code>{% load staticfiles %}
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;Bootstrap Example&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;link href="\static\base\css\hamburgers.css" rel="stylesheet"&gt;
          &lt;link href="\static\base\css\navbar.css" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;nav class="navbar navbar-expand-md bg-dark navbar-dark"&gt;
              &lt;button class="hamburger hamburger--squeeze" height="15" id="hamburger" data-target="#collapsibleNavbar" data-toggle="collapse"&gt;
            &lt;span class="hamburger-box"&gt;
              &lt;span class="hamburger-inner"&gt;&lt;/span&gt;
            &lt;/span&gt;
          &lt;/button&gt;
              &lt;a class=" navfont navbar-brand mx-auto" href="/account"&gt;Gucci Enterprises&lt;/a&gt;
              &lt;div class="navshow"&gt;
                  {% if user.is_authenticated %}
                      &lt;a href="/account/logout" class="navfont important"&gt;Logout&lt;/a&gt;
                  {% else %}
                      &lt;a href="/account/login" class="navfont important" &gt;Login&lt;/a&gt;
                  {% endif %}
              &lt;/div&gt;
              &lt;div class="collapse navbar-collapse" id="collapsibleNavbar"&gt;
                  &lt;div class="container"&gt;
                      &lt;div style="text-align: center"&gt;
                          {% if user.is_authenticated %}
                          &lt;ul class="navbar-nav"&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;a class="nav-link navfont" href="/account/profile"&gt;Profile&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;a class="nav-link navfont" href="/account/profile/edit"&gt;Edit Profile&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;a class="nav-link navfont" href="/account/change-password"&gt;Change Password&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                          {% else %}
                          &lt;ul class="navbar-nav"&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;a class="nav-link navfont" href="/account/register"&gt;Register&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item"&gt;
                                  &lt;a class="nav-link navfont" href="/account/reset-password"&gt;Reset Password&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                          {% endif %}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="navhide"&gt;
                  {% if user.is_authenticated %}
                      &lt;a href="/account/logout" class="navfont important"&gt;Logout&lt;/a&gt;
                  {% else %}
                      &lt;a href="/account/login" class="navfont important"&gt;Login&lt;/a&gt;
                  {% endif %}
              &lt;/div&gt;
          &lt;/nav&gt;
          &lt;br&gt;
          {% block body %}
          {% endblock %}
  
      &lt;/body&gt;
  &lt;/html&gt;
  '''
  </code></pre>