logo
down
shadow

Toggle button appears but does not toggle when clicked


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 : facebook icon twitter icon
jQuery toggle DIV - Reset toggle when element is clicked

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)

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)

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?

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?

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>
Related Posts Related Posts :
  • Getting the all the cell values belongs to one column in html table using jquery
  • Is it safe to use .serialize() in user input?
  • How do we assign the URL to the respective image which is randomly appearing?
  • How to correctly use jQuery extend
  • How to fit iframe content size to its div area in bootstrap 4 when the window is shrunk?
  • How to Set a Different Image for Each Row in a jQuery Table using CSS
  • How to add full calendar date to dynamic textboxes
  • MultiDatesPicker for jQuery UI is not showing
  • How do I replace all hashtags in a contenteditable div with a hyperlink while ignoring previously replaced hashtags?
  • How to Edit jQuery Table Using CSS
  • Jquery hover triggers "mouse leave" without cursor leaving
  • DELETE http://localhost:8000/product/[object%20Object] 500 (Internal Server Error)
  • Comparing two string arrays and returning key of not found element using jquery
  • using jquery to change list items is changing all list items, when i want to only change one list item
  • Sending a Json data from my html page to a php
  • Click function to search a specific element in a Json object
  • Bootstrap 4 - Progress Bar Progression
  • how to deleted item materialize chips
  • jQuery - Hide non-active elements using filter()
  • Adding style to string table is not working
  • Github merge multiple files into single compressed master file
  • Replace characters in a field on page load
  • Unable to send data from Form to SQL database
  • If all divs have same style, remove element
  • How to click a jQuery Dialog button in TestCafe
  • Cannot reinitialise DataTable with Angular Datatable
  • How to add Class active on Click in Navbar
  • how to call fail method into jquery.get/post success method?
  • Slider with tabs
  • Jquery Get parent element from data function
  • Ho to put a new line in <p> tag in my jquery?
  • How can I use a text value as a mathematical operator?
  • DataTable columns values showing Only DefaultContent
  • JQuery select dynamically added elements
  • How to change an image source on hover?
  • How to bind jquery event to dynamically added multiple DOM elements?
  • How to get td values and store in array using Jquery?
  • How to add handler to dinamically created tr in JQuery?
  • How to Covert Html to PDF in Jquery?
  • Jquery before() and after() used to create a <div> container not inserting closing tags in after()
  • I want to delete previously added class
  • Open html page in same window after clicking on navlink
  • Datatable is not working when I populate table using smarty
  • How to change image based on the offset top of the content div
  • Find the index of table column with specific id
  • How to return value of $(window).resize()
  • How to optimize adding numerous elements dynamically into web page
  • Content slide down on top of page?
  • How to write if statement for when a specified option is selected in select tag in JQuery
  • HTML tags remove from textarea using jQuery
  • ShareThis not display properly when initially hidden
  • jquery - Bind datepicker event
  • How can I cause an element to move on mouse scroll using transform matrix?
  • How to add Custom summaries for autogenerated colums?
  • How to update table row with data from an array using jQuery
  • Cannot get the element in jQuery
  • How to search for two values in array at the same time?
  • Creating a floating document property control that is available in all tabs of Spotfire dashboard
  • Add a "wrapper" div tag to wrap other html div tags?
  • Reload form if I get an error when validate email
  • shadow
    Privacy Policy - Terms - Contact Us © festivalmusicasacra.org