Trying to hide the previous element and then show the next element however the code is not working. It needs to be that every .quiz-group show the next but also hide the previous when the more button is clicked.
Code is:
x=1;
$('.quiz-group:lt('+x+')').show();
$('.more').click(function(e) {
e.preventDefault();
x= (x+3 <= quiz_groups) ? x+3 : quiz_groups;
$('.quiz-group:lt('+x+')').slideDown();
$('.quiz-group').not(':lt('+x+')').slideUp();
$('.back').show();
});
HTML is:
<div class="quiz-group">
<ul class="question-single">
<li>
<p>text?</p>
<ul class="answer">
<li>Answer 1</li>
<li>Answer 2</li>
<li>Answer 3</li>
</ul>
</li>
</ul>
</div>
The code iterates through each third question and adds the quiz-group div wrapper.
Currently it appends the quiz group to the existing (not hiding the previous one).
Thanks
Related
I am quite new to everything about html/js/css. Right now i need a list so i decided to use a list that u can slidetoggle. I looked it up and found how to recreate that effect (the code below):
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer ul li").filter(":has(ul)");
linkClick.click(function () {
$(this).find('ul li').slideToggle(200);
});
(if you are wondering about the 2 ul and li, it is because i want that list in another list, but that doesn t change the question so i didn t include it in my explanation)
Since i am quite new to this topic, i only understand like 70% of what is happening. But for my project i need to work with the elements of the list(the ones which were hidden and after sliding down visible). I want to do stuff that requires clicking them like highlight on click, but now i encounter the problem, that the code i posted makes the slide effect being triggered not only by the headline, but also by the elements. So i cannot click elements without minimizing the list with the same click (obviously the elements are hidden again then). I hope you guys can explain me how to make the function only be triggered by the head object and not by the whole list element(head and the expanded list).
Look the slide effect is being triggered not only by the headline but also by the elements that are because the concept of event bubbling which basically means in case of click event if you clicked a child element the event is bubbled by default to the parent elements tree till the document level firing any registered event handler. so when you click the element you click the headline too, so you need to add another child element and handle the click on it something like this:-
<div class="tableContainer">
<ul>
<li> <span>menu 1</span>
<ul>
<li>link 1</li>
</ul>
</li>
<li><span> menu 2</span>
<ul>
<li>link 2</li>
</ul>
</li>
<li><span> menu 3</span>
<ul>
<li>link 3</li>
</ul>
</li>
<li> <span>menu 4</span>
<ul>
<li>link 4</li>
</ul>
</li>
</ul>
</div>
$(function() {
var subMenu = jQuery(".tableContainer ul li ul li");
var linkClick = jQuery(".tableContainer span");
console.log(linkClick.length);
linkClick.click(function() {
console.log('clicked');
$(this).siblings('ul').slideToggle(200);
});
});
Full Working Example Here
Hope this answers your question.
I am trying to make tabbing cyclical within a dropdown menu.
Here's my JSFiddle: https://jsfiddle.net/Lc7saks3/
<nav id="primary_nav_wrap">
<div>
<ul>
<li tabindex="0">Menu
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
</li>
</ul>
</div>
<br />
<br />
<input type="text" />
</nav>
Click on the Menu element and then tab through the options.
Currently, the tabbing goes through the 5 options within the dropdown menu and then moves on to the input element.
How can I make it such that the dropdown options are tabbed again,
cyclically, from option 1, once the last option (option 5) is reached?
You would need to use script listen for the Tab key while on the last item and, when pressed, immediately move focus back to the first item (or dynamically adjust tabindex values when you get to the last item).
However, DO NOT DO THIS as it constitutes a keyboard trap and is a failure of WCAG 2.0 item 2.1.2, No Keyboard Trap. There is a lengthy technique for handling this that essentially says to not do what you are trying to do: G21: Ensuring that users are not trapped in content
Finally, I suggest you take the tabindex off the li as that is not an interactive / actionable control and no place for a tabindex.
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 7 years ago.
Improve this question
So I have this problem. Such a structure is generated programmatically
<ul id="container1">
<li>Click 1</li>
<li>Click 2</li>
<li>Click 3</li>
</ul>
And on generation time click event handlers are assigned to these 'li' elements. Basically clicking on any 'li' hides the other 'li' elements and only the one which is clicked would be visible.
Now what I want to do is to have the same navigation cloned with all it's behaviour and I want to show it also on the other part of the page. It would look like this then
<ul id="container1">
<li>Click 1</li>
<li>Click 2</li>
<li>Click 3</li>
</ul>
<ul id="container2">
<li>Click Cloned 1</li>
<li>Click Cloned 2</li>
<li>Click Cloned 3</li>
</ul>
The trick here is, when I click on any 'li' element under 'container2', the action will happen on 'container1', lets say If I click on 'Click Cloned 1' on 'container2', 'Click 2', 'Click 3' will disappear on 'container1'. I must code this on pure JS and no external libraries are allowed. I tried many things and nothing worked. Do you have any idea how can I make container2 working as an alias of container1?
Below may be what you want (when an element in #container2 is clicked, the other elements in #container1 will disappear):
var alias = document.querySelector('#container2').childNodes;
Array.prototype.slice.call(alias)
.forEach(function(el) {
el.onclick = function() {
var that = this;
var targets = document.querySelector('#container1').childNodes;
Array.prototype.slice.call(targets)
.forEach(function(ta, i) {
if (ta.nodeType === 1 && !that.parentNode.childNodes[i].isEqualNode(that)) {
ta.style.display = 'none';
}
})
};
});
<ul id="container1">
<li>Click 1</li>
<li>Click 2</li>
<li>Click 3</li>
</ul>
<ul id="container2">
<li>Click Cloned 1</li>
<li>Click Cloned 2</li>
<li>Click Cloned 3</li>
</ul>
See JSFiddle
I'm trying to select the content I click and this content has to be the first one to be selected. Like the select option.
This is the img.
I'm not quite sure how to make this, this is my demo: http://jsbin.com/jazej/1#0
Basically the part of the code is this.
<li class="dropdown">
Select Card <b class="caret"></b>
<ul class="dropdown-menu" id="indexCards">
<li class="active">Card 1</li>
<li class="">Card 2</li>
<li class="">Card 3</li>
<li class="">Card 4</li>
</ul>
</li>
But I can't get no event fire or something when I do $('#indexCards'). Any idea about this?
Try this : Read text of the clicked anchor inside indexCards and put it in selectCard
$(function(){
$('#indexCards li a').click(function(){
$('.active').removeClass('active');
$(this).closest('li').addClass('active');
var text = $(this).text();
$('#selectCard').html(text+'<b class="caret"></b>');
});
});
This is a two-part question. I'm using jQuery for a project and wanting to click a link and toggle the class name "highlight" to that link and also to the div with the same id as the rel attribute of the link. I then want to be able to link to the next div without the classname of "highlight". Here's the HTML for it:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
go to next div without class of highlight
<div id="panel1">some text</div>
<div id="panel2">some text</div>
<div id="panel3">some text</div>
Can anyone help with jQuery side of things?
Many thanks in advance!
Assuming HTML like this:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<a id="next-unhighlighted">Go to next div without class "highlight"</a>
<div class="panel" id="panel1">Panel 1</div> <!-- Note the added -->
<div class="panel" id="panel2">Panel 2</div> <!-- "panel" classes -->
<div class="panel" id="panel3">Panel 3</div>
You can use JS like this:
$('ul li a').click(function () {
var $this = $(this), // <a>
id = $this.attr('rel'),
nextUnhighlighted = $('#next-unhighlighted'), // <a>
targetDiv = $('#' + id),
nextDiv;
// Un/highlight the clicked link
$this.toggleClass('highlight');
// Un/highlight the div related to the target link
targetDiv.toggleClass('highlight');
// Update nextUnhighlighted to point to next unhighlighted div
nextDiv = $('div.panel:not(.highlight)');
if (nextDiv[0]) { // A next sibling was found
nextUnhighlighted.attr('href', '#' + nextDiv.attr('id'));
} else {
nextUnhighlighted.removeAttr('href');
}
});
Note that, if the final panel is already highlighted, then this code does not update the href attribute for a#next-unhighlighted, but removes it. It's a trivial exercise to add wrap-around behavior, such that highlighting the final panel would link back to the first panel.
A note about the odd syntax if (nextDiv[0]): If the first element in the jQuery collection nextDiv exists, then there is at least one element in the collection. This behaves similarly to (but not exactly the same as) nextDiv.length > 0, but is marginally faster and smaller.
As discussed in the comments, to link each panel to the next unhighlighted one, add <a rel="next-panel">Next panel</a> to each panel's HTML, then add something like this to the main click handler:
$('div.panel a[rel="next-panel"]').each(function () {
var $this = $(this),
nextPanel = $this.parent().next('div.panel:not(.highlight)');
if (nextPanel[0]) {
$this.attr('href', '#' + nextPanel.attr('id'));
}
});
Depending on your project requirements, you'll need to initialize each of these next-panel links (or else they'll only initialize after the first click), and you may want to make the final panel's ;oml wrap around to the first.