I want, when a CATEGORY is active, for the .closeorshow div to be hidden. If no category is selected, the .closeorshow div should be shown.
I tested a bit with $(".closeorshow").hide() and .show(), but I am a jQuery beginner and I couldn't figure it out. The problem seems to be that the .closeorshow div reappears whenever I unselect any category, instead of when no categories are selected.
Here's a fiddle.
HTML:
<ul class="types">
<li class="item" data-target="games">Games</li>
<li class="item" data-target="music">Music</li>
<li class="item" data-target="movies">Movies</li>
<li class="item" data-target="ljudobild">Ljud & Bild</li>
</ul>
<div class="description" id="games">Description of Games</div>
<div class="description" id="music">Description of Music</div>
<div class="description" id="movies">Description of Movies</div>
<div class="description" id="ljudobild">Description of Television</div>
<br><br>
<div class="closeorshow">
This class are going to be SHOWN when NONE of the items are selected, and HIDED
when one of the items is selected.
</div>
JS:
$(document).ready( function() {
$('.types li').click( function(t) {
$('.closeorshow').hide();
if ($(this).hasClass('active')) {
$(this).removeClass('active');$(this).addClass('item');
$('.closeorshow').show();
} else {
$(this).addClass('active');$(this).removeClass('item');
}
$('#'+$(this).attr('data-target')).toggle();
});
});
The basic idea is to check whether the class .active exists. This is done by calling $(".active"), which will produce an array, meaning it has access to the .length method. If the length of the array is greater than 0, you don't want to show .closeorshow, so call $(".closeorshow").hide(). Otherwise, you do want it shown, so call $("#.closeorshow").show().
Tell me if everything isn't bueno.
fiddle
I only changed your JavaScript:
$(document).ready(function () {
$('.types li').on("click", function () {
$(this).toggleClass("active item");
$('#' + $(this).attr("data-target")).toggle();
if ($(".active").length === 0)
$(".closeorshow").show();
else
$(".closeorshow").hide();
});
});
Here's the fiddle made originally to demonstrate the same concept. Only keeping for reference since it's simpler than your problem, but nevertheless demonstrates how to fix the problem in question.
Related
I have a page on a site that has multiple FAQ questions where when you click the " + " the answer slideToggle's. I'm having an issue where on click all of the answers for all questions open, and I want to be able to toggle one at a time.
Is there a way I can do this using "parent" "child" selectors in jQuery?
HTML:
<div class="main-slide">
<div class="main-slide-title">
<p>One-time Close Purchase/Construction Loans</p>
</div>
<div class="main-slide-plus">
<p>+</p>
</div>
</div>
<div class="sub-slide default-hidden">
<ul>
<li>Finance the construction</li>
<li>Purchase of lot</li>
<li>Permanent loan</li>
<li>FHA, and VA are available</li>
</ul>
</div>
</div>
jQuery:
$(".main-slide-plus").click(function () {
$(".sub-slide").slideToggle(500);
});
Yes from the HTML piece you provided, you can get the parent main-slide and then toggle the sibling with class sub-slide
So something like
$(".main-slide-plus").click(function () {
$(this).parents(".main-slide").sibilings(".sub-slide").slideToggle(500);
});
if this is the structure you have repeating for the accordion, you will need to go to the parent, then find the next .subslide element. Along the lines of the following:
$(".main-slide-plus").click(function () {
$(this).parent().next(".sub-slide").slideToggle(500);
});
I was just assigned my first project for work and am having some trouble with the last details.
Essentially, when a user clicks a list item in a class of "answerPick" is added to the li. When the user clicks another li item to change their answer the class of "answerPick" is removed from the first choice and added to the new choice. At the end of the form, the user submits and I take all values attached to li items with a class of "answerPick".
Here is an example of the structure of one of the form questions:
<!--Section B-->
<section id="section-b" class="grid">
<div class="content-wrap">
<div class="section-question">
<img src="/Images/modules/GiftThemeHeader_418x50.jpg">
</div>
<ul class="answer-options-grid">
<li class="answer" data-url="relaxation"><img src="/Images/modules/Relaxation_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Relaxation</li>
<li class="answer" data-url="skincare"><img src="/Images/modules/BodyCare_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Body Care</li>
<li class="answer" data-url="date-night"><img src="/Images/modules/DateNight_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Date Night</li>
<li class="answer" data-url="at-home-spa"><img src="/Images/modules/Spa_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">At-home spa </li>
</ul>
</div>
</section>
You'll notice I have an image called "Check1Mobile" right next to the selected image. This image is automatically hidden via .hide().
Basically what I'm trying to do is have the check image show using .show(), when the li item is clicked and is given the class "answerPick". I'm trying to only target specific instances of the class "topimg" during the click function because I use that image/class for each of the form questions.
Here is a snippet of code. I can include everything but I am a javascript scrub so it is messy, to be honest.
$jq('.answer img').click(function () {
if ((this).parent().hasClass('answerPick')) {
$jq('.topimg').show();
}
else {
$jq('.topimg').hide();
} });
Based on the piece of code you have written it should be:
$jq('.answer img').click(function () {
$jq('.topimg').hide()
if ($jq(this).parent().hasClass('answerPick')) {
$jq(this)('.topimg').show();
}
});
But I can also suggest :
$jq('.answer img').on('click', function () {
const el = $jq(this)
el.parent().find('.topimg')
el.find('.topimg').toggle(el.hasClass('answerPick'))
});
Here's a jsfiddle for live example.
sorry for the title, I don't know how I should have said it better (my brain is currently melting because of this problem I can't solve).
Here's a description of my problem:
At first I have one div with a list of names in it:
<div id="objekt1">
<ul id="listeNamen">
<li> Hans Mustername </li>
<li> Hans Mustername </li>
<li> Hans Mustername </li>
</ul>
</div>
When I click on a name in this div, a second div box (#objekt2) pops up, with more information about the person I clicked on. In this div box there may be a link to even more details, if you click this #objekt3 (new div box) should pop up.
If I already clicked on the link in #objekt1 and click it again, there shouldn't be any more div added, same goes for #objekt2.
Now I've tried it using jQuery, sadly it doesn't work the way it should. If I click the link in #Objekt1 2 times, 2 divs will be added. If I click the link in #Objekt2 no div is added.
Here's my jQuery code for this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
function checkDiv(){
var anzahlDiv = $("div").length;
if (anzahlDiv == 1){
$('<div id="objekt2">testlink #1</div>').insertAfter("#objekt1");
}else if (anzahlDiv == 2){
$('<div id="objekt3">testlink #2</div>' ).insertAfter("#objekt2");
}else{
return;
}
exit;
}
$('#objekt1 ul li a, #objekt2 a').click(function () {
checkDiv();
});
Is there anyone here who could help me out on this one please? :(
I would do it by adding some data attributes to the html, and then process those with generalized javascript. It's more readable, and no need to modify code if the data changes.
Basically I added a data-show attribute to the links, which is a comma separated list of the div ids that needs to be visible when the link has been clicked.
HTML:
<div id="objekt1">
<ul id="listeNamen">
<li>John</li>
<li>Mary</li>
</ul>
</div>
<div id="john-info" class="infodiv">
Info about John.
More info
</div>
<div id="john-moreinfo" class="infodiv">
More info about John.
</div>
<div id="mary-info" class="infodiv">
Info about Mary.
More info
</div>
<div id="mary-moreinfo" class="infodiv">
More info about Mary.
</div>
CSS:
.infodiv {
display: none;
}
JS:
$("body").on("click", ".infolink", function (event) {
var dataShow = $(this).attr("data-show").split(",");
$(".infodiv").each(function (index, div) {
var divId = $(div).attr("id"),
visible = dataShow.indexOf(divId) !== -1;
$(div).toggle(visible);
});
event.preventDefault();
});
Here is a working demo jsfiddle.
Since you want different actions for different objects you should have differnet functions e.g.:
....
//Based on your curent code
function for_objekt1()
if (anzahlDiv == 1){
$('<div id="objekt2">testlink #1</div>').insertAfter("#objekt1");
}else if (anzahlDiv == 2){
$('objekt2').remove();
if (anzahlDiv == 3){
$('objekt3').remove();
...
}
}
...
or something similar
Incase if you have fewer divs to show then you can do like this
<div id="objekt1">
<ul id="listeNamen">
<li> Hans Mustername </li>
<li> Hans Mustername </li>
<li> Hans Mustername </li>
</ul>
</div>
<div id="test"></div>
<script type="text/javascript">
function first(){
$('#test').html("");
$('#test').html('or any thing you want');
}
function second(){
$('#test').html("");
$("#test").html("other thing you want"
)};
</script>
In case you have dynamic content the you can create a single function and pass its id the function and change the content of the div as you would like. It may not solve the problem but hope it would be helpful enough :)
Script:
$( ".title").mouseenter(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).show();
}).mouseleave(function() {
var which = $(this).index();
$('.globalnav li').find('.dropdown').hide().eq(which).hide();
});
Navigation:
<ul class="globalnav">
<li>
<div class="title">Home</div>
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink">Link1</div>
<div class="navlink">Link1</div>
</div>
</div>
</li>
...
The above code is what I am using right now which does not work in Chrome as intended *I need to hold my click down to view the div. I use mouseover, it does not work properly in IE and FF.
I am also having trouble showing the associated div of the title (on title hover, show specific div) due to the nature of the coding format itself (client given code). Right now, on hovering over a title, it shows the first li's content for "navlinks".
Here's a fiddle to show you
Thanks
Why are you using the index of the .title element, if the other LI's look like that, the which variable will always be 0, and it's not the way to target the right .dropdown ?
Try something more like this
$( ".title").on('mouseenter mouseleave', function(e) {
var dropdown = $(this).closest('li').find('.dropdown').toggle(e.type=='mouseenter');
$('.dropdown').not(dropdown).hide();
});
And if you want the dropdown to be visible while hovering it, place it inside the element that triggers the mouseleave
<li>
<div class="title">
Home
<div class="dropdown">
<div class="navlinks">
<div class="linkstitle">Title</div>
<div class="navlink">Link1</div>
<div class="navlink">Link1</div>
</div>
</div>
</div>
</li>
FIDDLE
I have a code that goes like this on HTML:
<div class="blog_highlight">
<ul class="calendar">
<li>Nov</li>
<li>25</li>
</ul>
<ul class="commentaries">
<li>16</li>
</ul>
<div class="entry_info">
<div>
<img src="images/blog_pix_1.jpg" width="230" height="210" alt="" />
</div>
<h2>Title</h2>
<p>Text</p>
<p>Leer mas</p>
</div><!-- end entry info -->
</div><!-- end blog highlight -->
I would like to achieve that on hover on the UL (with classes calendar and commentaries), the border color for div.entry_info and background of a.read_more changes via jQuery. This is what I have however the second one isn't working.
<script>
$(document).ready(function(){
$('ul.calendar').hover (
function () {
$(this).nextAll('.entry_info').addClass('hover_border');
$(this).nextAll('a.read_more').addClass('more_jquery');
$(this).next('ul.commentaries').addClass('bubble_hover');
},
function () {
$(this).nextAll('div.entry_info').removeClass('hover_border');
$(this).nextAll('a.read_more').removeClass('read_more_jquery');
$(this).next('ul.commentaries').removeClass('bubble_hover');
});
});
</script>
My current issue is that everything except the second line works.
This is the line with the issue:
$(this).nextAll('a.read_more').addClass('more_jquery');
I am fairly new to jQuery and have tried siblings and next and everything but it won't work. I tried with eq(0) which worked but how do I loop it? The reason I go with classes and not ID is because this is a box that gets repeated multiple times.
Thank you for you help.
Why not simply use CSS?
ul.calendar:hover ~ .entry_info {
// selects all .entry_info's which are on the same level (siblings) as the ul.calender which is hovered over
}
BTW I'm sure that jQuery's magic $-function also supports the general sibling combinator, so $("item ~ sibling") should work just fine:
$("...").hover(function() {
$("... ~ siblings");
}
See:
http://www.w3.org/TR/selectors/#sibling-combinators (selectors CSS 3)
http://api.jquery.com/category/selectors/ (selectors CSS 1 - 3 are supported)
It does not work because nextAll gets all siblings based on the selector. Your hyperlink is not a sibling. Instead you can use find to search entry_info for the link.
http://jsfiddle.net/U7hNS/
<ul class="calendar">
<li>Nov</li>
<li>25</li>
</ul>
<div class="entry_info">
<p>Leer mas</p> <!-- NOT A SIBLING! -->
</div>
$('ul.calendar').hover (
function () {
$(this).nextAll('.entry_info').addClass('hover_border');
$(this).nextAll('.entry_info').find('a.read_more').addClass('more_jquery');
$(this).next('ul.commentaries').addClass('bubble_hover');
},
function () {
$(this).nextAll('div.entry_info').removeClass('hover_border');
$(this).nextAll('.entry_info').find('a.read_more').removeClass('more_jquery');
$(this).next('ul.commentaries').removeClass('bubble_hover');
});