Is it possible to order divs by class when clicking a menu link?
Here is my code:
<ul class="directors-menu">
<li>director1</li>
<li>director2</li>
<li>director3</li>
<li>commercial</li>
<li>promo</li>
<li>short</li>
</ul>
<div class="films">
<div class="director1 commercial"></div>
<div class="director1 promo"></div>
<div class="director2 commercial"></div>
<div class="director2 short"></div>
<div class="director3 commercial"></div>
</div>
What I would like to do is when I click on a director or category in the menu I would like the divs with the connected class to be ordered at the top.
Here is an example: When I click on director2 in the menu I would like the code to change to this:
<ul class="directors-menu">
<li>director1</li>
<li>director2</li>
<li>director3</li>
<li>commercial</li>
<li>promo</li>
<li>short</li>
</ul>
<div class="films">
<div class="director2 commercial"></div>
<div class="director2 short"></div>
<div class="director1 commercial"></div>
<div class="director1 promo"></div>
<div class="director3 commercial"></div>
</div>
Any thoughts on this?
Thanks in advance!
After you fix your HTML to be legal (close your divs), you can use this:
$(".directors-menu li").click(function() {
var cls = $(this).text();
var films = $(".films");
films.find("." + cls).each(function() {
films.prepend(this);
});
});
Working demo: http://jsfiddle.net/jfriend00/43muT/
And, a bit shorter version:
$(".directors-menu li").click(function() {
var films = $(".films");
films.find("." + $(this).text()).prependTo(films);
});
Working demo: http://jsfiddle.net/jfriend00/nLV2j/
It would better to put a custom attribute on the clickable items so the display text can be anything and you have direct control over the sort key like this:
Here's the HTML:
<ul class="directors-menu">
<li data-sort="director1">Sort by Director 1</li>
<li data-sort="director2">Sort by director 2</li>
<li data-sort="director3">Sort by director 3</li>
<li data-sort="commercial">commercial</li>
<li data-sort="promo">promo</li>
<li data-sort="short">short</li>
</ul>
<div class="films">
<div class="director2 commercial">d2</div>
<div class="director2 short">d2</div>
<div class="director1 commercial">d1</div>
<div class="director1 promo">d1</div>
<div class="director3 commercial">d3</div>
</div>
And, the code:
$(".directors-menu li").click(function() {
var films = $(".films");
films.find("." + $(this).data("sort")).prependTo(films);
});
Working demo: http://jsfiddle.net/jfriend00/GZhtr/
I think this is a nice way to do it
$(".directors-menu li").click(function(e){
$("div."+$(this).text()).prependTo("div.films");
});
Here is a fiddle http://jsfiddle.net/Vgt4s/
For sorting anything, the best jQuery plugin I have used is Tablesorter
Related
I am trying to get from the <ul class="click-to-section"> to the tester class where I want to loop over the children that has data-section and only show it if it matches up with the <ul class="click-to-section">
See the screenshot of the HTML from Google Dev tools - https://ibb.co/Y3g1jmC
my code to show this is below:
$(".click-to-section li").click(function() {
$(this).each(function(){
let testdata = $(this).data('section');
let testdata2 = $(this).closest("main").next().next().children();
$(testdata2).each(function(){
const dataSection = $(this).data("section");
console.log(dataSection);
});
});
});
HTML
<ul class="click-to-section">
<li data-section="videos">Videos</li> **When this is clicked**
<li data-section="lo">Learning objectives</li>
<li data-section="credits">Credit</li>
<li data-section="toolkits">Toolkit</li>
</ul>
<div class="opinions"></div>
<div class="tester"> **Needs to traverse to this div and loop through the children to show the sections one at a time based on the data-section in the ul menu to equal the data-section here **
<div data-section="credits" class="js-tabs" style="display: none;"</div>
<section data-section="videos" class="js-tabs"></section>
<div class="js-tabs" data-section="lo" style="display: none;"></div>
<div data-section="toolkits" class="js-tabs" style="display: none;"></div>
</div>
Updated the code to click on li and show tester elements that matches data attributes of clicked li
Working Code below
$(".click-to-section li").on("click", function() {
var dataSection = $(this).attr("data-section");
$(".tester > *").hide();
$(".tester [data-section=" + dataSection + "]").show();
})
li {
cursor: pointer
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="click-to-section">
<li data-section="videos">Videos</li> **When this is clicked**
<li data-section="lo">Learning objectives</li>
<li data-section="credits">Credit</li>
<li data-section="toolkits">Toolkit</li>
</ul>
<div class="opinions"></div>
<div class="tester">
<div data-section="credits" class="js-tabs">cred </div>
<section data-section="videos" class="js-tabs">video</section>
<div class="js-tabs" data-section="lo">lo</div>
<div data-section="toolkits" class="js-tabs">js tabs</div>
</div>
I need div.edit-button to toggle its sibling div.additionalFieldForm.
Note that there's more than one div.edit-button and div.additionalFieldForm on the page, but I would like to target the div.additionalFieldForm that is in the same "family" as the div.edit-button that was clicked.
$(".edit-button").click(function () {
// PROBLEMATIC SELECTOR BELOW:
$(this).closest("div").prev().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customFieldUl">
<li class="customFieldLi">
<label class="top_title">Additional Field</label>
<div class="additionalFieldForm">Content</div>
<div class="edit-button">Edit</div>
<div class="remove-button">Remove</div>
</li>
<li class="customFieldLi">
<label class="top_title">Additional Field</label>
<div class="additionalFieldForm">Content</div>
<div class="edit-button">Edit</div>
<div class="remove-button">Remove</div>
</li>
</ul>
I've tried other selectors but I couldn't specifically target just the div.additionalFieldForm sibling of the edit button being clicked.
EDIT: I realize that there must be an underlying problem because the selector works on jsFiddle (http://jsfiddle.net/wf7jjoq7/), but not on my site, without any console errors.
Try using siblings()
$(".edit-button").click(function () {
$(this).siblings(".additionalFieldForm").toggle();
});
Try this solution:
$(".edit-button").click(function () {
// PROBLEMATIC SELECTOR BELOW:
$(this).parent().find(".additionalFieldForm").first().toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="customFieldUl">
<li class="customFieldLi">
<label class="top_title">Additional Field</label>
<div class="additionalFieldForm"></div>
<div class="edit-button">Edit</div>
<div class="remove-button">Remove</div>
</li>
<li class="customFieldLi">
<label class="top_title">Additional Field</label>
<div class="additionalFieldForm"></div>
<div class="edit-button">Edit</div>
<div class="remove-button">Remove</div>
</li>
</ul>
li is the common parent. So,
$(".edit-button").click(function () {
$(this).closest("li").find(".additionalFieldForm").toggle();
});
I am trying to take content from a nav bar, and then modify and append it to a mobile menu. The nav bar html looks like
<div id="top_bar" class="nav">
<div class="container">
<div class="row">
<nav class="clearfix">
<span>My Account</span>
<span> Rewards</span>
<span>Customer Service</span>
</nav>
</div>
</div>
</div>
I need to append the anchors above to the following menu and have them work in the format below.
<ul id="stmobilemenu" class="visible-xs visible-sm show">
<li class="stmlevel0">first</li>
<li class="stmlevel0">second</li>
<li class="stmlevel0">third</li>
</ul>
I tried to do this like
var add_to_menu;
$('#top_bar nav a').each(function(){
var line = '<li class="stmlevel0">';
$(this).addClass('ma_level_0');
line += $(this).html();
line += '</li>';
add_to_menu += line;
})
$('#stmobilemenu').append(add_to_menu);
The result of this was it added undefined, then it added only the content
so appeneded was in this type of format.
<li class="stmlevel0"><span>My account</span></li>
what I want it to add is in this type
<li class="stmlevel0"><span>My account</span></li>
Another thing I tried was
$('#stmobilemenu').append(
$('#top_bar nav a').each(function(){
$(this).prepend('<li class="stmlevel0">');
$(this).addClass('ma_level_0');
$(this).append('</li>');
}));
I had a few problems with this though, first of all the append and prepend were not actually surrounding the html I want. It comes out like
<a href="http://127.0.1.1:8080/my-account" class="top-bar-link ma_level_0">
<li class="stmlevel0"></li>
<span>My account</span>
</a>
So I need that li to actually surround the a. Also it actually removed the content of #top_bar nav a from its original spot, which is not what I want it to do. I want it only to copy and add to the mobile menu. Can someone help?
Use clone() to make a copy of each <a>
var $mobMenu= $('#stmobilemenu');// store reference to menu element
$('#top_bar nav a').each(function(){
var $link = $(this).clone().removeClass().addClass('ma_level_0');
$('<li class="stmlevel0">').append($link).appendTo( $mobMenu);
});
var anchors = $('#top_bar nav').children();
anchors.each(function(){
var $this = $(this),
$li = $('<li class="stmlevel0"></li>');
$this.removeClass().addClass('ma_level_0').appendTo($li);
$li.appendTo('#stmobilemenu');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top_bar" class="nav">
<div class="container">
<div class="row">
<nav class="clearfix">
<span>My Account</span>
<span> Rewards</span>
<span>Customer Service</span>
</nav>
</div>
</div>
</div>
<ul id="stmobilemenu" class="visible-xs visible-sm show">
<li class="stmlevel0">first</li>
</ul>
I have 2 lists of elements. When I click on an element of first list (it is a link), I basically need to add css class 'is-active' to that element AND to corresponding item from another list. I think they have to be in separate lists, as they are in two different bootstrap columns for mobile friendliness. I am currently styling elements from first list with:
$(document).ready(function(){
$('.tabs li').click(function(){
$(this).addClass('is-active');
$('.tabs li').not(this).removeClass('is-active');
});
})
Can't select elements from the other list though.. Any ideas how can I achieve this functionality with css, js/jquery?
My html structure currently is like this:
<div class="col-md-6">
<ul class="tabs">
<li class="tabs-title is-active">
title_1
</li>
<li class="tabs-title">
title_2
</li>
</ul>
</div>
<div class="col-md-6">
<div class="tabs-content">
<div class="tabs-panel is-active">
<div class="entry">
<p>content_1</p>
</div>
</div>
<div class="tabs-panel">
<div class="entry">
<p>content_2</p>
</div>
</div>
</div>
</div>
When I click on 2nd link from first column, the 2nd div from second column should get 'is-active' class. Is this possible?
I guess lists do not have corresponding elements right now. What do I need to have the items linked in some way?
Here's an example, since we don't know what your list looks like.
<ul class="tabs">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
<ul class="letters">
<li>item a</li>
<li>item b</li>
<li>item c</li>
</ul>
Also, it's easier to remove all instances of the is-active class and then add it just to the target elements.
$(document).ready(function(){
$('.tabs li').click(function(){
var index = $('.tabs li').index(this);
$('.tabs li, .letters li').removeClass('is-active');
$(this).addClass('is-active');
$('.letters li').each(function(i) {
if (i == index)
$(this).addClass('is-active');
})
});
})
https://jsfiddle.net/fzeauw7a/
I'm having a list of products displayed. Once the show more is clicked the text within the extras class needs to be displayed, the show more needs to be hidden and show less needs to be visible. The opposite needs to happen when show less is clicked.
I used the below jQuery code and it works but the problem is that it shows/hide add the extra text in every block. I want it to show only the relevant block.
Javascript
$(document).ready(function() {
$('.extras').css("display", "none");
$('.showmore').click(function() {
$(".extras").toggle();
$('.showmore').hide();
$('.less').show();
});
$('.less').click(function() {
$(".extras").toggle();
$('.extras').hide();
$('.showmore').show()
});
});
HTML
<div class="blocks">
<div class="right">
<ul class="options">
<li class="x">Service 1</li>
<li class="y">Service 2</li>
<li class="z">Service 3</li>
<li class="r">Service 4</li>
<li class="k">Service 5</li>
</ul>
<div class="showmore"><a>+ show more</a></div>
</div>
<div class="extras">
<p>test text</p>
<div class="less"><a>- hide</a></div>
</div>
</div>
<div class="blocks">
<div class="right">
<ul class="options">
<li class="x">Service 1</li>
<li class="y">Service 2</li>
<li class="z">Service 3</li>
<li class="r">Service 4</li>
<li class="k">Service 5</li>
</ul>
<div class="showmore"><a>+ show more</a></div>
</div>
<div class="extras">
<p>test text</p>
<div class="less"><a>- hide</a></div>
</div>
</div>
<div class="blocks">
<div class="right">
<ul class="options">
<li class="x">Service 1</li>
<li class="y">Service 2</li>
<li class="z">Service 3</li>
<li class="r">Service 4</li>
<li class="k">Service 5</li>
</ul>
<div class="showmore"><a>+ show more</a></div>
</div>
<div class="extras">
<p>test text</p>
<div class="less"><a>- hide</a></div>
</div>
</div>
Any help will be appreciated.
Make sure you do your logic in relevant sections. Demo Here
Try:
$(document).ready(function () {
$('.extras').css("display","none");
$('.showmore').click(function () {
var parent = $(this).closest('.blocks');
$(parent).find(".extras").toggle();
$(parent).find('.less').show();
$(this).hide();
});
$('.less').click(function () {
var parent = $(this).closest('.blocks');
$(parent).find(".extras").toggle();
$(parent).find('.showmore').show();
$(this).hide();
});
});
Use .closest()
$(document).ready(function() {
$('.extras').css("display", "none");
$('.showmore').click(function() {
var $div = $(this).closest('.blocks');
$div.find(".extras").toggle();
$div.find('.showmore').hide();
$div.find('.less').show();
});
$('.less').click(function() {
var $div = $(this).closest('.blocks');
$div.find(".extras").toggle();
$div.find(".extras").hide();
$div.find('.showmore').show();
});
});
Check Fiddle
try using $(this).toggle() in the event handler.
Or I guess more completely, $('.extras').hide(); $(this).show();
Use the $(this) to get the relevant content,
so inside the $(".showmore").click(),
$(this).parents(".blocks").children(".extras").toggle();
$(this).parents(".blocks").children('.showmore').hide();
$(this).parents(".blocks").children('.less').show();
Test Link
You can combine closest, find and toggle to work.
So all your javascript can be changed to the following.
$('.showmore, .less').click(function() {
var $elements = $(this).closest('.blocks').find('.extras, .showmore');
$elements.toggle();
});
demo
References
Closest
Find
Toggle