Home>
jQuely: I want to open and close repeatedly when using slide toggle

Isara is currently being copied.
This is the first accordion implementation,
・ Opening and closing the answer part
・ Switching arrow icons
I was able to, but it would fall into an infinite loop of opening and closing.

Error message

If i click twice or three times, it will cause a bug, or it will open and close many times, and it will not stop even if you click again.

* There was no error message in the developer tool.

Applicable source code

        
            
                <i></i>FAQ 
            
            
                
                
                    <p><i></i>Do you need programming skills?<span><i></i></span></p>
                
                
                    <p>No, it is not necessary. However, iSara guarantees that you can earn more than the participation fee. Therefore, a simple test is conducted at the time of prior call interview, and in some cases it is refused. Please understand only this point.</p>
                
                
                
                
                    <p><i></i>What happens if I don't earn more than the participation fee?<span><i></i></span></p>
                
                    <p>We will extend the support indefinitely until you earn a total of 248,000 yen or more as a participation fee. (After participating in the course, it is an extension condition to practice for more than 30 hours a week and report once a week.) If i learn and practice properly, it is possible to generate income even if i am freelance.</p>
                
                
                
                    <p><i></i>What will happen to my accommodation during my stay?<span><i></i></span></p>
                
                    <p>Accommodation costs are required, but don't worry as you will be staying at an iSara partner hostel.</p>
                
                
                
                    <p><i></i>What happens to my meals during my stay?<span><i></i></span></p>
                
                    <p>There are many inexpensive restaurants around the baht (about 160 baht) around the new share house. There are also Japanese restaurants, and it is possible to take a meal.</p>
                
                
                
                    <p><i></i>Are there any additional costs?<span><i></i></span></p>
                
                    <p>Accommodation costs (total 20,000 yen) and food expenses (about 150 yen per meal).</p>
                
                
                
                    <p><i></i>Can I get a job or change job?<span><i></i></span></p>
                
                    <p>According to a DODA survey, the job placement ratio for engineers in 2017 is 7.5 times. This is a higher figure than the medical industry (doctor: 6 times, nurse: 3 times) where the shortage of human resources is called out. However, if you can acquire proper skills, you should not be troubled by finding a job or changing a job. Former recruitment professionals also participate as administrative staff.</p>
                
                
                
                    <p><i></i>Do I have to be freelance?<span><i></i></span></p>
                <p>No, you don't have to be freelance. Actually, there are various career paths for past graduates, such as independence, continuing as a side job, and getting a job.</p>
                
                
                
                    <p><i></i>I want to work while traveling around the world as a nomad worker<br>. Is it possible?</p><span><i></i></span>
                
                    <p>You can do it if you work hard and acquire skills. iSara was opened to increase the number of people who can live a life of "work when they want and play when they want". By the way, all the instructors are working as nomad workers and travel freely around the world.</p>
                
                
                
                    <p><i></i>What programming language do you learn?<span><i></i></span></p>
                
                    <p>Learn HTML/CSS/PHP. Every language is in high demand.</p>
                
                
                
                    <p><i></i>I want to create web application services, apps and media in the future.<span><i></i></span></p>
                
                    <p>There are experienced teachers. It's okay.</p>
                
                
                
                    <p><i></i>Do you have any plans to hold it next time?<span><i></i></span></p>
                
                    <p>Undecided. Please contact us first.</p>
                
                
                
                    <p><i></i>I am worried for the first time to go abroad.<span><i></i></span></p>
                
                    <p>Please rest assured that the instructors will support your local life. However, passport acquisition is required.</p>
                
                
                
                    <p><i></i>I can't speak Thai or English. Is it possible to participate<br>?<span><i></i></span></p>
                
                    <p>It is OK because there are Thai staff and English staff. There are Japanese and Thai staff, so there is no need to worry about troubles during the period.</p>
                
                
                
                    <p><i></i>What about security?<span><i></i></span></p>
                
                    <p>Bangkok is a very safe city with a better location compared to cities in Southeast Asia and other countries in South Asia. Although not as much as Japan, it is known as a very safe country in the world.</p>
                
                
                
                    <p><i></i>Do you need a computer?<span><i></i></span></p>
                
                    <p>Yes. A laptop is required.</p>
                
            
        
    
. question-wrapper {
    padding: 60px 0px;
}
.question-logo {
    font-size: 20px;}
.question-wrapper {
    padding: 70px 40px;
}
.question-logo {
    padding-bottom: 40px;
}
.question-lessons {
    width: 82%;
    margin: 0 auto;
}
.question-lesson {
    width: 100%;
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 5px;
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    position: relative;
}
.questionAco {
    font-weight: bold;
    text-align: left;
    padding: 30px 0 40px;
    opacity: 0.7;
    display: none;
}
.question-lesson span {
    position: absolute;
    bottom: 0px;
    right: 10px;
    opacity: 0.1;
    font-size: 40px;
}
.question-span {
    position: absolute;
    bottom: 5px;
}
.fa-question-circle {
    color: # 016ea9;
}
.question-lesson p: hover {
    text-decoration: underline;
}
$(function () {
    $('# scroll_to_top'). click (function () {
        $('body, html'). animate ({scrollTop: 0},

 300, 'linear');
    });
      $(window) .scroll (function () {
    // Get the "Back to TOP" button.
    var $toTopButton = $('# scroll_to_top');
    // Get how much has been scrolled vertically.
    var scrollTop = $(this) .scrollTop ();
    // Get the window height.
    var windowHeight = $(this) .height ();if (scrollTop>= windowHeight) {
      // If i am scrolling more than the height of the window,
      // Display the "Return to TOP" button.
      $toTopButton.show ();
    } else {
      // If i am not scrolling beyond the height of the window,
      // Hide the "Return to TOP" button.
      $toTopButton.hide ();
    }
      // "Accordion part"

      $('. question-lesson'). click (function () {
        $(this) .next (). slideToggle ();
    $("span i", this) .toggleClass ("fa-angle-up fa-angle-down");
});
    });

    $('. flow-left'). click (function () {
    });
});



// ↓ Click to move to the element part (avoid the header part)
$(window) .load (function () {
  $('. scroll-form'). click (function () {
    var headerHeight = 80
    var scrollForm = $('. form'). offset (). top-headerHeight;
    $('body, html'). animate ({scrollTop: scrollForm},

300, 'linear');
  });
});
Tried

I tried something similar to the progate below,
When I used it, it didn't move at all and the icons didn't change.

$('. question-lesson ’). click (function () {
    var $answer = $(this) .find ('. questionAco ’);
    if ($answer.hasClass ('open')) {
      $answer.removeClass ('open');
      // Use the slideUp method to hide $answer
      $answer.slideUp ();
      // Rewrite the contents of the child element's span tag using the text method
      $(this) .find ('span'). html (’<i></i>’);
    } else {
      $answer.addClass ('open');
      // Use the slideDown method to display $answer
        $answer.slideDown ();
      // Rewrite the contents of the child element's span tag using the text method
      $(this) .find ('span'). html ('<i></i>’);
    }
  });
Supplemental information

・ What is the cause?
・ Is there any problem other than javascript code?
・ Best code in this case
I would appreciate it if you could tell me.

I'm busy, but I'm looking forward to your response.

  • Answer # 1

    Proposed code

    $(function () {
      console.log ("top");
      $('# scroll_to_top'). click (function () {
        $('body, html'). animate ({scrollTop: 0}, 300, 'linear');
      });
      $(window) .scroll (function () {
        console.log ("scroll");
        // Get the "Back to TOP" button.
        var $toTopButton = $('# scroll_to_top');
        // Get how much has been scrolled vertically.
        var scrollTop = $(this) .scrollTop ();
        // Get the window height.
        var windowHeight = $(this) .height ();
        if (scrollTop>= windowHeight) {
          // If you are scrolling more than the height of the window,
          // Display the "Return to TOP" button.
          $toTopButton.show ();
        } else {
          // If you are not scrolling beyond the height of the window,
          // Hide the "Return to TOP" button.
          $toTopButton.hide ();
        }
        // "Accordion part"
        $('. question-lesson'). on ("click", function () {
          console.log ("click");
          $(this) .next (). slideToggle ();
          $("span i", this) .toggleClass ("fa-angle-up fa-angle-down");
        });
      });
    });

    console output result

    scroll × 44 times
    click × 44 times

    After correction

    $(function () {
      console.log ("top");
      $('# scroll_to_top'). click (function () {
        $('body, html'). animate ({scrollTop: 0}, 300, 'linear');
      });
      $(window) .scroll (function () {
        console.log ("scroll");
        // Get the "Back to TOP" button.
        var $toTopButton = $('# scroll_to_top');
        // Get how much has been scrolled vertically.
        var scrollTop = $(this) .scrollTop ();
        // Get the window height.
        var windowHeight = $(this) .height ();
        if (scrollTop>= windowHeight) {
          // If you are scrolling more than the height of the window,
          // Display the "Return to TOP" button.
          $toTopButton.show ();
        } else {
          // If you are not scrolling beyond the height of the window,
          // Hide the "Return to TOP" button.
          $toTopButton.hide ();
        }
      });
      // ★ get out of the scroll event (no need to write inside)
      // "Accordion part"
      $('. question-lesson'). on ("click", function () {
          console.log ("click");
          $(this) .next (). slideToggle ();
          $("span i", this) .toggleClass ("fa-angle-up fa-angle-down");
      });
    });