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);
});
Related
I have some nested <div>s where I want to call a function on click of one of the nested <div>, however I am not able to achieve it.
Here is my HTML :
<div class="seat available">
<div id="2020" class="seat-click"></div>
<div class="tootltip-text">
<p>Name : <span id="id31">Subham<span><button>Ok</button></span></span></p>
<p>Seat No :<span id="13-tooltip-count">111</span></p>
<p>Team :<span id="id32">Abc</span></p>
</div>
</div>
Here is my jQuery :
$('.seat-click').on('click', function () {
console.log('Hello');
});
For clear understanding, refer to https://jsfiddle.net/47s8q2pv/4/
Here, I want the click function to be called only when I click <div id="2020" class="seat-click"></div>.
This can be achieved if I change the jQuery to
$('.seat-click').on('click', function () {
console.log('Hello');
});
If I do so, then my <div class="tootltip-text"> will also call the same click function, which I don't want because I will have some buttons and clickable items inside the tooltip in future.
Is there any workaround for this?
Thanks in advance.
As #entiendoNull said, your seat-click element is of height 0.
You can either set the height of that element or write the click event handler on the seat element instead using:
$('.seat').on('click', function () {
console.log('Hello');
});
The div you're using are not displayed in the browser as <div id="2020" class="seat-click"></div> doesn't have any width or height.
I don't understand what you want for this case, but if you want to make the button where the tooltip appears able to be clicked, maybe this is right for you
<div class="seat available">
<div id="2020" class="seat-click">
<div class="tootltip-text">
<p>Name : <span id="id31">Subham<span><button>Ok</button></span></span></p>
<p>Seat No :<span id="13-tooltip-count">111</span></p>
<p>Team :<span id="id32">Abc</span></p>
</div>
</div>
</div>
Here's the code I'm looking at:
<div class="blotter_workshopitempublished blotter_entry">
<div class="blotter_author_block">
<div class="blotter_avatar_holder">
<a href="https://steamcommunity.com/profiles/steam_profile_id">
<div class="playerAvatar online">
<img src="https://steamcdn-a_medium.jpg" data-miniprofile="number">
</div>
</a>
</div>
<div>
nickname
</div>
<div>
added an item to their favorites </div>
</div>
I'd like to hide all occurrences of "blotter_workshopitempublished blotter_entry" based on "steam_profile_id" or "nickname" (one or the other, I don't care, but "id" would be better), which are inside nested divs.
I looked at several other similar questions but still need help; I'll use this inside a Tampermonkey script.
Thanks
Something like this should help:
const blotters = document.querySelectorAll('.blotter_workshopitempublished.blotter_entry');
blotters.forEach(blotter => {
const id = blotter.querySelector('a').href.split('/').pop();
if (id === "put whatever id you want to hide in here") {
blotter.style.display = "none";
}
});
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 don't think my question is difficult but I'm just a newbie in jQuery and this forum so hope that you can help me with this problem. I just want to open seperately the content of two divs by two button with the same class name and for easier to understand I will show my code snippet first:
<div id="CNN">
<div id="article1">
<div class="content">
My content of CNN goes here
</div>
<div class="more">
My button goes here
</div>
</div>
</div>
<div id="Bloomberg">
<div id="article1">
<div class="content">
My content of bloomberg goes here
</div>
<div class="more">
My button goes here
</div>
</div>
</div>
And here is my current jQuery code which is not working:
$(document).ready(function() {
$("div.more").each(function() {
$(this).click(function() {
var target = $(this).parent().next(".content");
$(target).slideDown("slow");
});
});
});
Here I want to click more button and it will show only the content belongs to it. You are free not to follow my current code :). So that's all of my question, hope you all can help me to improve my programming skill and thanks you so much in advanced!
$(document).ready(function() {
$("div.more").click(function(){
$(this).parent().find("div.content").slideDown("slow");
});
});
Should do the trick
Try this:
$(document).ready(function() {
$("div.more").click(function() {
var target = $(this).parent().find(".content");
target.slideDown("slow");
});
});
Example Fiddle
Try this:
$("div.more").click(function() {
$(this).prev().slideDown("slow");
});