logo
down
shadow

One @click event with multiple toggles


One @click event with multiple toggles

By : Andrus Rondex Sandre
Date : October 23 2020, 08:10 PM
With these it helps As stated by @RoyJ, you need an active state for each FAQ. You can achieve this by adding a boolean flag to the FAQ box items.
code :
new Vue({
  el: '#app',
  data() {
    return {
      items: [{
          question: 'Question 1',
          answer: 'Answer 1',
          active: false
        },
        {
          question: 'Question 2',
          answer: 'Answer 2',
          active: false
        },
        {
          question: 'Question 3',
          answer: 'Answer 3',
          active: false
        },
        {
          question: 'Question 4',
          answer: 'Answer 4',
          active: false
        }
      ]
    }
  }
})
.faq-box {
  background-color: rgba(128, 222, 234, 1);
  width: 200px;
}

.faq-box.active {
  background-color: rgba(197, 225, 165, 1);
}

ul {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid black;
}

li:last-child {
  border: none;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <li v-for="item in items" :class="{ faqBox: true, active: item.active }" class="box faq-box is-shadowless has-py-3" @click="item.active = !item.active">
    <div>
      <span>{{ item.question }}</span>
      <p v-show="item.active" v-html="item.answer"></p>
    </div>
    <i :class="{ fa: true, 'fa-caret-down': item.active, 'fa-caret-up': !item.active }"></i>
  </li>
</div>


Share : facebook icon twitter icon
.slidetoggle() toggles once too often after .click() event

.slidetoggle() toggles once too often after .click() event


By : kebu
Date : March 29 2020, 07:55 AM
it fixes the issue I have tried to check and fix the problem that I understood please check the live demo here
Changes I have made in your versions:
code :
<div id="container">
    <a href="#test" class="fill-div">
        Testing Anchor
    </a>
    <div>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </div>
    <a href="#test" class="fill-div">
        Testing Anchor
    </a>
</div>
<div id="footer">
    Footer content Footer content Footer content Footer content Footer content Footer content
</div>
$(function() {
    if($("#footer").length>0)
    $("#footer").hide();
});

$(window).scroll(function() {
    if ($(this).scrollTop() == 0) {
      $("#footer:visible").slideUp('fast',function(){});
    }
    else {
      $("#footer:hidden").slideDown('fast',function(){});
}});


$(document).ready(function(){
 $('a.fill-div').click(function(){
    $('#footer').slideToggle('fast',function(){});
    $('html, body').animate({scrollTop:0}, 'slow');
    $("#footer").die('slideToggle');
    return false;
 });
});
JQuery - making a list 3 or more img toggles go to their default image when one of them is toggled via click event

JQuery - making a list 3 or more img toggles go to their default image when one of them is toggled via click event


By : leo mohn
Date : March 29 2020, 07:55 AM
wish help you to fix your issue I think this fiddle accomplishes what you're trying to do:
JSFIDDLE
code :
$('div').click(function(){
    $(this).find('img:hidden').addClass('tofadein');
    $(this).find('img:visible').addClass('tofadeout');
    $(this).find('img.tofadein').fadeIn();
    $(this).find('img.tofadeout').fadeOut();
    $(this).find('img').removeClass('tofadein').removeClass('tofadeout');

    $(this).siblings().each(function(){
        $(this).find('img').eq(0).fadeIn();
        $(this).find('img').eq(1).fadeOut();
    });
});
Pass Click Event to Function - JQuery Toggles Children in Unordered List

Pass Click Event to Function - JQuery Toggles Children in Unordered List


By : Logan Spangler
Date : March 29 2020, 07:55 AM
it fixes the issue One problem with your code is that you are using both $.toggle and setting/unsetting a class to hide these elements yourself.
One option would be to use only the class approach, and to do so by using $.toggleClass rather than your own custom code:
code :
function expandNavigation(target) {
  $(target).parent().toggleClass('collapsed');
}
ul li.collapsed ul {
  display: none;
  padding-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li id="Menu1" class="collapsed"><a href="javascript:void(0)" onclick="expandNavigation(this)">Faculty Resources</a>
    <ul id="Faculty_Res">
      <li>Archived Courses</li>
      <li>College List</li>
      <li>Current Courses</li>
      <li>Curriculum Outcomes</li>
      <li>EM Accreditation Information</li>
      <li>EM Competencies and Curricula</li>
      <li>EM Job Market Data</li>
      <li>Faculty Positions</li>
      <li id="Menu2" class="collapsed"><a href="javascript:void(0)" onclick="expandNavigation(this)">Program Start Up Resources</a>
        <ul id="Faculty_Res_Prog_Startup">
          <li>Needs Assessment</li>
          <li>Proposal Examples</li>
        </ul>
      </li>
      <li>Q&A</li>
      <li>Research</li>
      <li>Syllabi Examples</li>
      <li>Synergy Focus Group</li>
      <li>Synergy Webinar Slides</li>
      <li>Textbooks</li>
      <li>Webinars</li>
    </ul>
  </li>
</ul>
jQuery toggle and slidetoggle on click event toggles the element with weird bounce after toggle

jQuery toggle and slidetoggle on click event toggles the element with weird bounce after toggle


By : Syed Asad Ammar
Date : March 29 2020, 07:55 AM
Any of those help The toggle event puts a few lines of style into the
. Namely, the following:
code :
display: block;
overflow: hidden;
height: 75.9189px; // this value goes up/down
padding: 0px;
margin: 0px;
width: 330.892px;
opacity: 0.89527; // this value goes up/down
Target multiple divs containing toggles to change the styles on click individually

Target multiple divs containing toggles to change the styles on click individually


By : Rahul Mule
Date : March 29 2020, 07:55 AM
Does that help This is happening because you are adding class to all the .item-row. Instead just target the .item-row closest to clicked .toggle and for that use .closest().
code :
$('.toggle').change(function(){
    if($(this).is(":checked")) {
        $(this).closest('.item-row').addClass('disabled-view');
    } else {
        $(this).closest('.item-row').removeClass('disabled-view');
    }
});
Related Posts Related Posts :
  • jQuery target next of the same class in the whole DOM
  • encoding must be a valid encoding error in process encoding
  • How to do a date range to view data from selected date highcharts
  • How do I refactor this composed function with Ramda.js?
  • jQuery to serialize selected option's value, not label
  • Convert object to Chartis.js structure
  • Dynamic import with not bundled file
  • Click handler not firing for elements rendered in Ajax Callback - only in Safari
  • Math.max.apply gives an error CreateListFromArrayLike called on non-object
  • get the parent nodes to a given node in d3 dendogram
  • is-dropdown-submenu-parent makes links unclickable on Opera and Chrome
  • JS: Sum column values and updating result on change
  • Query against nested object keys
  • Fullcalendar getting its parent colspan
  • How to retrieve a dynamic number of elements by id
  • How to access redux variables and functions from deep components
  • Efficiently access Array.prorotype.filter single-item returns
  • PHP var into Javascript
  • How to parse json with javascript/jquery if content matches string
  • How can I make a pyramid based on alphabet?
  • Javascript sorting a csv rows and displaying in table
  • How to get specific data from json from api using ajax. The json looks strange to me
  • react js html5 video not working
  • Javascript Angular 4 Change ngClass from another Component
  • Hide multiple table columns with javascript
  • Convert datetime to ISO Format using moment js
  • Dynamically adjust canvas size depending on content
  • setTimeout function with document on click
  • Need advice on nested Promises.all
  • Google Captcha expiration time
  • Syntax of Javascript TAPE unit test
  • Parse php json to javascript
  • Write to Internet Explorer javascript console with vba in excel
  • 2 Forms with Jquery
  • Why the loop stops right in the middle?
  • filter system for restaurant booking
  • how to add active class in framework nav menu when (add/edit) pages are opened
  • Port a js map in dart
  • How to get value from select using javascript
  • Audio won't be muted with JavaScript - removing audio tags with mutationobserver needed
  • How to include an HTML/Javascript game into reactJS website
  • Convert Nodejs server into node module
  • Strage Vue behaviour. V-if does not watch properly
  • Is it possible to use map/filter/reduce inside a promise by returning the result with Promise.resolve?
  • Does EcmaScript have any rule where whitespace is important for the compiler during parsing
  • How is DOM and Virtual DOM represented in memory?
  • cannot display text onchange select option
  • My gulpfile can edit (change) and delete file, but dont copy new (add) files
  • How do I reset scroll position of paper-dialog-scrollable?
  • Loading unlooped gif-animation several times
  • Strange error from Google API: initializeAutocomplete is not a function
  • Array state variable is not being set during componentWillMount
  • Stop refresh on form submit when using javascript
  • Npm WARN deprecated babel-preset-es2015@6.24.1: Thanks for using Babel: we recommend using babel-preset-env now: please
  • Cant get wheel scroll delta on Firefox
  • Puppeteer with Prompt, ignoring rest of function
  • VueJS Form Input Binding
  • How To Extend mail.Chatter Widget in Javascript Odoo 10
  • How Chk two checkboxes at a time using jQuery
  • Broken "if" statement in JavaScript code…
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org