Collapsible FAQ with links that jump to and expand other questions - javascript

I currently have this code for an FAQ list of questions and answers. The headings, questions and answers are expandable/collapsible on click.
http://jsfiddle.net/7RbCZ/
However, one feature I need is to be able to, within answer text, link to other questions so that the page jumps to and opens up this question.
Currently I have written (line 6 HTML):
(See Question 3)
in the answer to Question 1, and given Question 3 an id (line 18 HTML):
<li class="list-level-2" id="question-3">Question 3?
This is not working but hopefully demonstrates what I want to achieve.
Thanks very much for any help.
Edit: Thanks to marbor3 below. Re:their solution, does any one have any ideas about how to get the page to jump to this question/answer? Also have a problem that if the question linked to is already open then the trigger(click) makes it invisible.

You can catch click event on the link and trigger click event in element which id is in the href
$(".triggerNextQuestion").click(function(event) {
event.preventDefault();
var question = $($(this).attr('href'));
if(!question.parent().is(':visible')) {
question.parent().trigger('click');
}
question.trigger('click');
});
You will need to check if parent is visible also, to show it if it's not.
It's a starting point, sure needs some modifications, like showing question in after parent is shown.
Here's fiddle

Related

jQuery loses added class [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I have several buttons with a class mybtn. I need to set a class mybtn-active on the one that is clicked, and remove it from the one that has it at the moment.
$('.mybtn').on('click', function () {
$('.mybtn-active').removeClass('mybtn-active');
$(this).addClass('mybtn-active');
});
When I click on a button, currently active loses its class, as it should. But the clicked one doesn't get the class.
I passed through the script with Chrome debugger and it works. It just loses the class when the code exits the script. Any ideas?
[SOLUTION] by #musefan
The buttons were <a> tags in the background, which I didn't think about because this is the code I inherited, I didn't write the HTML. And that was the problem. See the accepted answer.
Assumptions
I am going to take a massive gamble here, but it's the only thing I can think of that would explain what the OP is describing and could actually happen with that code. We would need the OP to provide HTML to validate my assumption.
I am also assuming that the class selector in the sample code is a typo of the question, and is not a problem in the original code (as the OP specifically says the removal of the classes is working correctly).
My assumptions have since been validated by the OP in comments on this answer and other answers.
Problem
I expect your problem is that you are using either a elements and your click is actually reloading the page, or using buttons that are also having the same effect, thus causing all classes to revert to default.
Solution
You can fix this by using the arguments of the click event as follows:
$('.mybtn').on('click', function (e) {
e.preventDefault(); // This prevent the hyperlink from reloading the page.
$('.mybtn-active').removeClass('mybtn-active');
$(this).addClass('mybtn-active');
});
You are missing a
.
in the selector on your second line.
It should be
$('.mybtn-active').removeClass('mybtn-active');
As I have mentioned in the comment, it is typo mistake. You have to change $('mybtn-active') to $('.mybtn-active'). Look at the snippet.
$('.mybtn').on('click', function () {
$('.mybtn-active').removeClass('mybtn-active');
$(this).addClass('mybtn-active');
});
.mybtn-active {
font-size:25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="mybtn">Button1</button>
<button class="mybtn">Button2</button>
<button class="mybtn">Button3</button>
<button class="mybtn">Button4</button>

Event listeners on chrome extension class of buttons doesn't seem to work, or the action of the listener doesn't work? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am trying to make a chrome-extension popup-window whereby an user can add a specific tab's URL or delete one or delete all. The delete all works fine, the add URL does the trick too. However, the 'delete one link' doesn't work at all and I have really been struggling with that department. I hope someone could help me out with this one because I don't know what the problem is. Here are the files:
popup.js: gist.github.com/kobrajunior/4852f85ae18cfb9edbe542a820b8c107
popup.html: gist.github.com/kobrajunior/1c26691734c19391c62dc336ed2e1791
manifest.json: gist.github.com/kobrajunior/78acda830c2d1c384333542422f1494d
I have read on other posts that it may be because the getElementsByClassName doesn't return a 'real' array by which you can manipulate things with functions, if that's true, than I'm all out of tools to solve this one.
The 'X' button doesn't work :
Clear everything buttons works as expected :
In your removeMe() function you have to remove your DOM element from its parent element. Something like this:
function removeMe(i) {
// remove it from the DOM
var list = document.getElementsByClassName('items');
list[i].parentNode.removeChild(list[i]);
list.splice(i, 1);
// remove it from chrome-storage
chrome.storage.local.get({urlList:[], titleList:[]}, function(data) {
urlList = data.urlList;
titleList = data.titleList;
urlList.splice(i, 1);
titleList.splice(i, 1);
// update chrome storage
saveList();
});
}
Or you could just use your main list id:
document.getElementById("list").removeChild(list[i]);

get multiple Elements By Tag Name in JavaScript? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Hello there am trying to make an image gallery for example lets say that I have multiple images and I want to change their opacity when I hover over them by using JavaScript I know that this is possible with CSS but am trying to accomplish this with JavaScript I tried using get Elements By Tag Name method but the problem it just can access one element by time so can I do that thanks
Try this:
var elements = document.getElementsByTagName("img");
Array.prototype.forEach.call(elements, function (e) {
// Here you can access each image individually as 'e'.
});
When you hover, get the ID of that image. Then loop through all images (example above) and set their opacity. If the element is equal to the one you clicked on (remember, you just took the ID so you can use it), just skip to the next one using continue;.
you have to collect you image elements like
var images = document.getElementsByTagName("img");
then you have to do like
Array.prototype.forEach.call(images, e => e.addEventListener("mouseover", function( event ) { do something}));

Expanding jQuery if div word count is over word limit [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I am after something similar to this jsFiddle: http://jsfiddle.net/t4CQt/
However, With a twist, what I would like to do is to have the content appear, and then when the content reaches 250 words (if words are not able to be done, a standard div min-height and increasing it upon click could work), I would like a 'Expand Content' or 'More' Button to appear, so the user can chose to click this and stretch out the content and read on, or to just scroll and see what is below.
Let me just note, I am not looking for the According jQuery, as I know this is a common recommendation for this sort of thing, but this will not work and will conflict with my Tab jQuery that is already on the page. The page is:
http://universitycompare.com/universities/anglia-ruskin-university/
As you can in the link above, the tab for 'overview' (scroll down) Has a lot of information and is about me controlling this so the user can read and see more of the information without scrolling.
Links to jsfiddle.net must be accompanied by code (stupid rule, thus this content in code).
http://jsfiddle.net/BramVanroy/t4CQt/7/
var s = $("#aboutExpand").html();
if (s.split(' ').length > 250) {
$("#aboutExpand").html(s.split(' ').slice(0,250).join(' ') + " ... " + 'Read more');
}
$("a.read-more").click(function() {
$("#aboutExpand").html(s);
});

Disable mouse in tag "li" [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I'm in doubt how to, disable the mouse over an image that is in such a tag "li".
I managed to disable the click event, but is necessary an event that even the mouse would go away and there would any action on the tag.
Like a java disable.
Only in jquery or javascript.
Tank's.
Disabling click:
$("#btnEmpresarial").removeAttr('onclick');
If you are looking to hide the mouse cursor, you can always use the CSS property cursor in this way:
cursor: 'none';
Living demo: http://jsfiddle.net/FhCLP/
If you also want to disable any click, you could use jQuery in this way:
$('#element').click(e){
e.preventDefault();
});
Living demo: http://jsfiddle.net/FhCLP/1/
Also, as pointed out by #KyleMit, you can even add the property cursor:not-allowed; if you want to show another cursor to specify the not-allowed state of the cursor.
Living demo: http://jsfiddle.net/FhCLP/2/
Use unbind method:
Unbind:
Removes handlers attached to the elements:
$( "#img li").unbind( "hover" );
If you've attached events to the item, e.preventDefault won't work because you're not stopping the default action. I think what you want to do is call .unbind(). Let's say you attached event handlers all the li elements in the following HTML but you didn't want to fire any events on the second item.
<ul >
<li>Enabled</li>
<li class="prevent">Disabled</li>
</ul>
Using jQuery, you can remove any bindings that have been applied to any items with the prevent class
$('.prevent').unbind();
If it improves clarity, you can style your element with the following CSS
.prevent {
cursor:not-allowed;
}
jsFiddle

Categories