Toggle button appears but does not toggle when clicked

» jquery » Toggle button appears but does not toggle when clicked

By : user3099454

Date : January 11 2021, 03:32 PM

Any of those help You forgot to add data-toggle="collapse" to the collapse button like this

code :

    <nav role="navigation" class="navbar navbar-default navbar-fixed-top" id="mynavBar">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand">Company page</a>
                 <button datatoggle="collapse" type="button" class="navbar-toggle" data-target="#navbarCollapse">
                  <!-- remaining button code -->
                </button>
            </div>
            <!-- your collapse div code -->
        </div>
    </nav>

Share :

jQuery toggle DIV - Reset toggle when element is clicked

By : JustinW

Date : March 29 2020, 07:55 AM

This might help you I'm trying to implement a slide out menu and I'm having trouble cancelling the toggle effect when the full panel is click. , Simply make use of two functions:

code :

   function togglePanel() {
    $('.menu-nav').toggle(
    function () {
        $('.full_panel').animate({
            width: "75%",
            opacity: 0.20
        }, 500);
        $('.aside-panel').animate({
            width: "25%"
        }, 500);
    },
    function () {
        $('.full_panel').animate({
            width: "100%",
            opacity: 1
        }, 500);
        $('.aside-panel').animate({
            width: "0%"
        }, 500);
    });
}
function togglePanelReverse() {
    $('.full_panel').animate({
        width: "100%",
        opacity: 1
    }, 500);
    $('.aside-panel').animate({
        width: "0%"
    }, 500);
}
$('.full_panel').click(function () {
    togglePanelReverse();
});
togglePanel();

Bootstrap 3 Navbar won't toggle (have checked existing solutions, still won't toggle collapse when clicked on)

By : Max Regitnig

Date : March 29 2020, 07:55 AM

wish helps you my bootstrap website li tags will condense on the mobile version. but when I click on the toggle button the navbar won't load up on the mobile version. , There is an extra space between data- target

code :

 <button type="button" class="navbar-toggle" data-toggle="collapse" data-
        target=".navHeaderCollapse">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">

HTML buttons, toggle when button clicked and toggle all other buttons (collapse info)

By : user1370990

Date : March 29 2020, 07:55 AM

I wish did fix the issue. On clicking the button simply loop through all the elements whose id starts with Project to set display = "none" by using Document.querySelectorAll() and Array.prototype.forEach(). Then show only the nextElementSibling of the clicked button. Try the following:

code :

function project(btn) {
  document.querySelectorAll('[id^="Project"]').forEach(div => div.style.display = "none");
  btn.nextElementSibling.style.display = "block";
}

<ul>
  <button class="button" onclick="project(this)">1st Project</button>
  <div id="Project1" style="display: none;" align="right">Information about the first project...</div>

</ul>

<ul>
  <button class="button" onclick="project(this)">2nd Project</button>
  <div id="Project2" style="display: none;" align="right">Information about the second project...</div>
</ul>

<ul>
  <button class="button" onclick="project(this)">3rd Project</button>
  <div id="Project3" style="display: none;" align="right">Information about the third project...</div>
</ul>

How to toggle the mat-toggle-button based on user input as well as toggle-button?

By : VIP

Date : March 29 2020, 07:55 AM

With these it helps I was trying to use the toggle button into my project, but I found myself stuck in the following case: , Change value="selectedVal" instead of [value]="selectedVal"

code :

<mat-button-toggle-group name="fontStyle" value="selectedVal" #group="matButtonToggleGroup" (change)="onValChange(group.value)" aria-label="Font Style">
  <mat-button-toggle value="true">True</mat-button-toggle>
  <mat-button-toggle value="false">False</mat-button-toggle>
</mat-button-toggle-group>

Click anywhere to close toggle menu and do not toggle all sub menus once clicked?

By : user2620831

Date : March 29 2020, 07:55 AM

it fixes the issue To closed the sidemenu is use mouseup so everytime you clicked outside side-menu class it will closed.
The problem is your not selecting the children of the parent that is why it opens all every time you click one dropdown. Please try this:

code :

/* ------------------------------------ */	
/*  MTD Menu
/* ------------------------------------ */	
$(document).ready(function(){

//closing menu by clicking to any
const $menu = $('.slide-menu');
$(document).mouseup(function (e) {
   if (!$menu.is(e.target) // if the target of the click isn't the container...
   && $menu.has(e.target).length === 0) // ... nor a descendant of the container
   {
     $menu.removeClass('slide-left');
  }
 });
// Menu Add Class Left
	$("#hamburger-icon").click(function(){
	$(".slide-menu").toggleClass("slide-left");
});

//  Menu Add Class Close 		
$('.slide-close-button button, .mdl-layout__obfuscator').click(function(){
    $(".slide-menu").removeClass("slide-left");
});
// Menu Dropdown menu active

 $(".dropdownmenu").click(function(){
    
    var target = $(this).parent().children(".sub-menu");
    $(target).toggleClass("active");
  });

});

/* Starting */


#hamburger-icon {
  height: 20px;
  position: relative;
  display: block;
  margin-top: 1.200em;
  z-index: 9998;
  width: 50px;
  float: left;
  margin-left: 10px;
}

#hamburger-icon .line {
  display: block;
  background: #000;
  width: 35px;
  height: 5px;
  position: absolute;
  left: 0;
  border-radius: 4px;
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
}
#hamburger-icon .line.line-1 {
  top: 0;
}
#hamburger-icon .line.line-2 {
  top: 50%;
}
#hamburger-icon .line.line-3 {
  top: 100%;
}
#hamburger-icon.active .line-1 {
  transform: translateY(10px) translateX(0) rotate(45deg);
  -webkit-transform: translateY(10px) translateX(0) rotate(45deg);
  -moz-transform: translateY(10px) translateX(0) rotate(45deg)
}
#hamburger-icon.active .line-2 {
  opacity: 0;
}
#hamburger-icon.active .line-3 {
  transform: translateY(-10px) translateX(0) rotate(-45deg);
  -webkit-transform: translateY(-10px) translateX(0) rotate(-45deg);
  -moz-transform: translateY(-10px) translateX(0) rotate(-45deg)
}

/* Slide Menu */
.slide-menu {
  position: fixed;
    -webkit-transform: translateX(-285px);
    -ms-transform: translateX(-285px);
    transform: translateX(-285px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
  background: #fff;
  top:0;
  bottom: 0;
  color: #333;
  z-index: 9999;
  width: 250px;
    -webkit-box-shadow: 3px 0px 7px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 3px 0px 7px 0px rgba(0,0,0,0.25);
    box-shadow: 3px 0px 7px 0px rgba(0,0,0,0.25);
}
.slide-header {
  height: 150px;
  color: #fff;
  top:0;
  background: url(mmm.png)no-repeat center center/cover;
  position: relative;
  text-align: center;
	background-size: contain;
    padding: 5px;
    background-origin: content-box;
	border-bottom: 1px solid #5555;
}
.slide-close-button button:hover{
  background-color: #a1a1a1
}
.slide-close-button button:active {
  background-color: #bbb
}
.slide-close-button button {
  background: #aaa;
  border: 0;
  font-size: 16px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  text-align: center;
  color: #fff;
  cursor: pointer;
  position: absolute;
  bottom: -15px;
  outline: none;
  right: 2em;
  z-index: 99999;
	padding: 0;
	line-height: 25px;
}
.slide-header>h1 {
  padding: 2em 0 0
}
.slide-header p {
  font-size: 12px
}
.slide-menu>.slide-menu-here>.menu {
  padding: .5em 0;
}
.slide-menu>.slide-menu-here>.menu li {
  position: relative
}
.slide-menu>.slide-menu-here>.menu li>a{
  padding: .8em 1em;
  width: 100%;
  position: relative;
  border-bottom: 1px solid #ececec;
  display: inline-block
}
.slide-menu>.slide-menu-here>.menu li.title span {
  padding: .8em 1em;
  border-bottom: 1px solid #ececec;
  width: 100%;
  position: relative;
  display: inline-block;
}
.slide-menu>.slide-menu-here>.menu li>.sub-menu {
    -webkit-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-transition-duration: .65s;
    transition-duration: .65s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    -webkit-transition-property: -webkit-transform;
    transition-property: transform;
    display:none
}
.slide-menu>.slide-menu-here>.menu li>.sub-menu.active {
  display: block;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}
.slide-menu>.slide-menu-here>.menu li>.sub-menu>li>a {
  padding-left: 2em;
  font-size: 13px;
  border-bottom: 1px solid #f5f5f5
}
.slide-menu>.slide-menu-here>.menu li.title>.dropdownmenu:after {
  content: "\f107";
  top: 10px;
  position: Absolute;
  right: 2em;
  background-color: #aaa;
  width: 20px;
  height: 20px;
  text-align: center;
  cursor: pointer;
  border-radius: 50%;
  line-height: 20px;
  color: #fff;
  font: normal normal normal 14px/20px FontAwesome;
}
.slide-menu a:hover {
  background-color: #f8f8f8
}
/* Slide Left  */
.slide-left {
      -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
    z-index: 99999;
}
.mdl-layout__obfuscator {
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    visibility: hidden;
    -webkit-transition-property: background-color;
    transition-property: background-color;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    -webkit-transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-timing-function: cubic-bezier(.4,0,.2,1);
}
.slide-left~.mdl-layout__obfuscator {
    background-color: rgba(0,0,0,.5);
    visibility: visible;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
	<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
  
  
  <div class="left menu-icon">
                <a href="#" id="hamburger-icon" title="Menu">
                  <span class="line line-1"></span>
                  <span class="line line-2"></span>
                  <span class="line line-3"></span>
                </a>
             </div>


<div class="slide-menu">
    <div class="slide-header">
      <h1></h1>
      <p></p>
      <div class="slide-close-button">
        <button class="close"><i class="fa fa-close"></i></button>
      </div>
    </div>
    <div class="slide-menu-here">
      <ul class="menu">
        <li><a href="#">Home</a></li>
        <li class="title"><span>Parent 1</span><div class="dropdownmenu"></div>
          <ul class="sub-menu">
            <li><a href="/">sub</a></li>
            <li><a href="/">sub</a></li>
            <li><a href="/">sub</a></li>
            <li><a href="/">sub</a></li>
          </ul>
        </li>
        <li class="title"><span>Parent 2</span><div class="dropdownmenu"></div>
          <ul class="sub-menu">
            <li><a href="/">sub</a></li>
            <li><a href="/">sub</a></li>
            <li><a href="/">sub</a></li>
            <li><a href="/">sub</a></li>
          </ul>
           <li><a href="/">new 1</a></li>

            <li><a href="/">new 1</a></li>
      </ul>
    </div>
  </div>