slideToggle Inner Div When Outer Div is Clicked - javascript

I have a Div within a Div within a span like this:
<div id="container">
<a class="tooltips" href="#">XBOX
<span class="tooltip-container">
<div class="tooltip-item">Controller</div>
<div class="tooltip-item">Console
<div class="filter-item">In Stock</div>
<div class="filter-item">Pre-Order</div>
</div>
<div class="tooltip-item">Kinect</div>
</span>
</a>
<a class="tooltips" href="#">PS4
<span class="tooltip-container">
<div class="tooltip-item">Controller</div>
<div class="tooltip-item">Console</div>
</span>
</a>
</div>
I added a click function that shows or hides the div. When I click the items within my outer div I would like to expand another filter-item list within the inner div. In other words, when I click "XBOX" it will expand and if I click "Console" that will expand to show more items. How can I achieve this? jsfiddle example listed below.
jsfiddle.net example

Here:
Fiddle: http://jsfiddle.net/zNV8T/
The main changes are in the JS...
$(window).on('load',function(){
//click PS4 or XBOX
$('.tooltips').click(function(){
if ($(this).find('.tooltip-container').css('display') == 'none') {
//first deactivate any active tooltip
$('.tooltip-container').hide();
$('.tooltips').removeClass('clickedSortFilter');
//then activate the clicked tooltip
$(this).find('.tooltip-container').show();
$(this).addClass('clickedSortFilter');
} else {
//deactivate the clicked tooltip
$(this).find('.tooltip-container').hide();
$(this).removeClass('clickedSortFilter');
}
});
//expand tooltip-item if it contains filter-item
$('.tooltip-item').click(function(e){
e.stopPropagation();
if ($(this).children().length > 0) {
if ($(this).find('.filter-item').css('display') == 'none') {
//first deactivate any active tooltip-item
$('.tooltip-item').css('z-index','0');
$('.filter-item').hide();
//then activate the clicked tooltip-item
$(this).css('z-index','1');
$(this).find('.filter-item').show();
} else {
//deactivate the clicked tooltip-item
$(this).find('.filter-item').hide();
}
}
});
});
...although I did make a few changes in the CSS as well, adding position:relative and display:none in one or two places, and I removed z-index somewhere.
I think the comments in the code explain the general functionality pretty well, if you don't understand some details, just ask me in a comment and I will try to clarify (I fixed adding the clickedSortFilter class to the tooltips too btw).
UPDATE:
Here is an updated fiddle: http://jsfiddle.net/FAZLu/
The spans are changed to divs, and the alignment is fixed (the way I would do it, see the comments for other options).
I also cleaned up your CSS a whole lot.

Related

each loop should only run once when button is clicked

I want to hide a div when a button is clicked and then show the next div with the same class. I have tried using this code, but when I do this, the next div that I want shown also fades out.
$('.arrow:last-of-type').on('click', function(){
$( ".collaboration" ).each(function( index ) {
if($('.collaboration').css('display') == 'block'){
$(this).fadeOut()
$(this).next().fadeIn()
}
})
})
Is there a way to stop the each() from running when it is executed once and then run again when the click action happens?
Here's the HTML:
<div id="collaborations">
<p class="arrow"><</p>
<div class="collaboration">
<img src="./img/test.png" />
<p>Text</p>
<button>Visit</button>
</div>
<div class="collaboration">
<img src="./img/test.png" />
<p>Text</p>
<button>Visit</button>
</div>
<div class="collaboration">
<img src="./img/test.png" />
<p>Text</p>
<button>Visit</button>
</div>
<p class="arrow">></p>
</div>
</div>
Thanks
Solution
You could solve this by not iterating through the .collaborations at all.
The key thing is that you need to keep track of which one is currently being shown.
If you know that, then what your click handler can do is show the next one and hide the current one.
I would suggest doing that with a class .active on the same div as .collaboration. You can then select the next div by $('.active').next().addClass('.active'), and deselect by $('.active').removeClass('.active').
You might need to store a reference to your first element before you select the next one 👍
Example
Here's a quick example of how this might work: https://codepen.io/juancaicedo/pen/LYGgPWa
I moved around the html to group all the collaborations into a div by themselves.
Other approaches
You'll find that you have to think through some other behaviors with the solution above. For example, in my example, there is a moment when two items are on the screen, causing their container div to grow and later shrink.
For these reasons, I don't like handling presentation from within javascript (i.e. using jquery's fadeIn/fadeOut).
If you can find a way to instead using only css, I think that's preferable. Here's an example using css transitions
https://codepen.io/juancaicedo/pen/ZEQqzrR
The each method of jQuery can be stopped whenever you want by returning false inside of the callback, so you can probably fix your code by doing this:
$('.arrow:last-of-type').on('click', function(){
$( ".collaboration" ).each(function( index ) {
if($('.collaboration').css('display') == 'block'){
$(this).fadeOut()
$(this).next().fadeIn()
return false;
}
});
});

after removing element from dom the length property doen't reflect that

I have this html created on the fly with javascript:
<div class="panel panel-default theaterPlayer">
<div class="panel-body panelbody69875341">
<div class="paneltop paneltop69875341">
<span class="glyphicon glyphicon-remove close closePlayer"></span>
</div>
<iframe width="560px" height="340px" id="id69875341"
src="" style="margin- top: 50px;"></iframe>
</div>
</div>
Then when i hit the closePlayer button in Jquery:
$('body').on('click', '.closePlayer', function(event) {
$(this).parent('div').parent('div').parent('.theaterPlayer').remove();
});
Then when i want to now the length off the element with class theaterPlayer so i know how much off those elements exist:
$('.theaterPlayer').length;
shows the ones removed + 1
How can i remove from the dom AND remove from that other collection that seams to exist?
May be the number of div changes at runtime. try removing it like:
$('body').on('click', '.closePlayer', function(event) {
$(this).closest('.theaterPlayer').remove();
});
Using this
$(".closePlayer").closest('div').parent('div').remove();
console.log($('.theaterPlayer').length);
Now you are able to remove all the inner divs, which contains in the outer div which has class panel panel-default theaterPlayer. So here i am assuming that on fly you are appending html to the div which contains class theaterPlayer:
Hence,
$('.closePlayer').on('click',function() {
$(this).closest('div').parent('div').remove(); // Here removes all inner Divs
console.log($('.theaterPlayer').length); // Length will be 1, and Outer Div remains there.
});
Or if u want remove all the div including outer div on Clicking of Close button, then use simply
$(this).closest('div.theaterPlayer').remove(); //Removes all given(html) Div's and show length as 0;
Hope this will help you.
I should be realy very ashamed of myself!!! Appendeing it to .container wasn't a smart thing to do because i'd forgotten i use another element with the same class that was'nt visible so i didn't noticed it. I'm very sorry for wasting all you time!

Hide() dropdown contents makes it disappear

I'm new to Javascript so this may be a stupid question, but I'm at a loss. I've been trying to get my dropdown to hide/close when the right list item is selected. I'm using the hover dropdown provided by W3Schools. I've copied the CSS they've provided and my HTML and JS look like this:
<div class="dropdown" id = "menu3">
<button class="dropbtn" id = "menu3btn">Menu 3</button>
<div class="dropdown-content" id = "menu3c">
<ul>
<li><a id="item30">Cheese</a></li>
<li><a id="item31">Pepperoni</a></li>
<li><a id="item32">Sausage</a></li>
</ul>
</div>
</div>
And JS:
$(document).ready(function(){
$('li').click(function(){
if($(this).text() == "Sausage"){
$(this).parent().parent().hide();
}
}
}
The current Javascript is closing the dropdown if the user clicks "Sausage", which is what I want. But when I hover over the menu again, the dropdown doesn't open/show. I've tried changing
$(this).parent().parent().hide();
to
$(this).parent().hide();
and the results are the same.
I've also tried to toggle the dropbtn by replacing the parent().hide() code with:
var btnName = "#"+$(this).parent().parent().parent().attr("id")+"btn";
$(btnName).toggle();
This removed the button and dropdown menu from the screen entirely.
I've also tried forcing the hover to show hidden dropdown-content by adding this method to my JS:
$(".dropdown").hover(function() {
if($(this).attr("id") == "menu3"){
$("#menu3c").show();
}
}
This didn't do anything either (the hidden content stayed hidden).
Any help would be much appreciated.
Instead of $(this).parent().parent().hide();, you can use this to hide the parent
$(this).closest('div').hide();
To show the menu again,
$('#menu3btn').on('click', function() {
$('#menu3c').toggle();
});

How to temporarily block selectable elements

I am working on a popup menu on my webpage. The menu contains various selectable items, and I would like to only allow selection of certain items after a top-selection has been made. Now I could hide all items lower-down, but that would make the popup look weird. I'd rather show them, but dimmed. My idea was to enclose the follow-up selections in a div, and have that div act as a blocker. Now the question is how to do it - I tried setting the z-index of the selBlocker div higher than the rest, also to give it absolute positioning, but didn't get anywhere yet. I am using a javascript library to handle the selections in general.
<div id="SelPopup" >
<div id="topSelect"></div>
<div id="selBlocker">
<div id="selectable2"></div>
<div id="selectable3"></div>
</div>
</div>
I would append a class to the items you dont want to select, and add the not() selector to your jQuery.
For example:
$("div:not('.selected').....
Instead of
$("div").....
Ofcourse you can add an opacity to the class .selected, to make it a little bit less visible.
You can try below:
Instead of using id for selection blocked element use class="selectBlocked" and for menu div use class="selectMenu"
<div id="SelPopup" >
<div id="topSelect" class="selectMenu"></div>
<div id="selBlocker1" class="selectMenu selectBlocked">
<div id="selectable2"></div>
<div id="selectable3"></div>
</div>
<div id="selBlocker4" class="selectMenu selectBlocked">
<div id="selectable5"></div>
<div id="selectable6"></div>
</div>
</div>
Now right jQuery for handling selection of menu and do nothing if selected menu is with class="selectBlocked"
$('.selectMenu').click(function(){
if($(this).hasClass("selectBlocked"))
return false;
// do your stuff if above condition fails
});
Thank you all for the suggestions, I actually found what I was looking for:
$("#selBlocker").css("pointer-events", "none");
This will nicely disable all interaction, and with
$("#selBlocker").css("pointer-events", "all");
I can restore it. Can add the change in opacity easily alongside it.

Toggle Image Source on Click

I'm trying to do a typical expand and collapse function to display/hide a div on image click.
Here's my HTML:
<div id="result_location">
<h3>Heading Text here</h3>
</div>
<div class="result_menu"></div>
And my JavaScript:
$('#result_location').click(function() {
$('.result_menu').slideToggle("slow");
});
So there's going to be an image within the #result_location div, that alternates between a plus/minus when the .result_menu gets toggled.
Hope that kinda makes sense!
Have wrote a fiddle for you.
Basically toggling the source will done the trick.
Here is the code
Html
<div class="msg_list">
<p class="result_location">Heading Text here<img src="http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif"></img></p>
<div class="result_menu">
This <br/>
is <br/>
a <br/>
Testing <br/>
Content
</div>
</div>
javascript
$(".result_location").click(function(){
$(this).next(".result_menu").slideToggle("slow");
})
.toggle( function() {
$(this).children("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/ExpandSign.gif");
}, function() {
$(this).children("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif");
});
check the fiddle here
Assuming I read correctly, your "trigger" is .result_menu. Here is a JSFiddle that accomplishes what I think you're looking for: http://jsfiddle.net/trevanhetzel/P4N2c/
Essentially, we bind to the trigger element using .on("click") and then find the image to toggle and .slideToggle it. Pretty straightforward.
$(function () {
$(".result_menu").on("click", function () {
$("#result_location img").slideToggle();
});
});
You'll also want to display: none the image in the CSS.
Am I missing anything about your desired outcome?
You could toggle a class on #result_location and then add the arrow image as a CSS background image for that selector. When clicked again the class would be removed, thus removing/changing the image.

Categories

Resources