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.
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
Related articles
- javascript - i would like to know how to repeatedly set the value to the item of "drop down picker" in react native
- javascript - i want to shorten the code using a for statement because it is long
- javascript - behavior of if statement using or condition
- javascript - how to implement client-side rendering using nextjs
- javascript - bug (?) when using axios configuration file as a plugin in nuxt
- javascript - how to use multiple select box refinements using the chosenjs library
- crash test using javascript canvas
- i want to encrypt with javascript using the public key created by openssl
- javascript - i want to change the process using check in jquery
- how can i avoid using global in javascript?
- javascript - addition using ++ is not reflected in js
- javascript - i want to dynamically rename a variable when using a for statement
- javascript - i installed a close button, but for some reason it does not disappear
- javascript - get json data of external api using useeffect of react hooks
- javascript - i want to insert the start tag and end tag of html tags individually using jquery
- javascript - i want to make a copy using a script in a spreadsheet
- image slides using javascript only work once
- to close the grandchild screen when the parent screen or child screen is closed in javascript
- javascript - i want to download a file in sjis format using js (jquery)
- how can i avoid the time lag when using setinterval in javascript?
Related questions
- javascript : JS Comparing id and displaying a suitable image
- javascript : How to get TypeScript to process JQuery $ (function () {})?
- javascript : I want to add a multilingual switch button for asp.NET MVC localization
- javascript : How to hang a handler on a function using .each
- javascript : I want to add a plus /minus button to a modal image in jquery 3.3.1.
- javascript : Running animation in line of sight
- javascript : Animation not working in Firefox
- javascript : Show more button on AJAX
- javascript : How to make sure that the content of one of the tabs is displayed immediately upon entering the page
- javascript : How to count the number of id in a div, and display that number?
Proposed code
console output result
After correction