I have a an HTML page with a list of 20 topics on it. I would like it so that when you click on one of those topics, 2 or 3 articles with links pop up underneath it.
I'm trying onclick but it means writing lots of code as you have to declare all the div styles for each of my topics.
Is there an easy way of doing this?
im currently writing this 20 times, and declaring 60 div styles:
<div class = "mousehand"
id = "show_first"
onclick ="this.style.display = 'none';
document.getElementById('show_second').style.display='block';
document.getElementById('dropdown').style.display='inline';
"> show text </div>
<div class = "mousehand"
id = "show_second"
onclick ="this.style.display = 'none';
document.getElementById('show_first').style.display='block';
document.getElementById('dropdown').style.display='none';
"> hide text </div>
<div id ="dropdown"> this is the text to be shown</div>
You can accomplish this with some Javascript. Add a ul within the li:
<li>Title
<ul>
...
</ul>
</li>
Set the inner ul's display to none using CSS. Then using Javascript, make a function that changes the display property of the inner ul to block.
As has been mentioned, jQuery can make this very straightforward, but your major code saving is going to come from taking advantage of event bubbling. You can do this is you structure your HTML something like this:
<div id="topics">
<div class="item">
<div class="show">
show text 1
</div>
<div class="hide">
hide text 1
</div>
<div class="text">
this is the text to be shown 1
</div>
</div>
<div class="item">
<div class="show">
show text 2
</div>
<div class="hide">
hide text 2
</div>
<div class="text">
this is the text to be shown 2
</div>
</div>
</div>
Now instead of attaching an onclick handler to each end every div, attach it to the parent element. To do this with jQuery:
$(window).load(function(){ //Do this when the page loads
$('#topics').bind('click', function(event) { //Find the element with ID 'topics' and attach a click handler
var t = $(event.target); //event.target is the element that was actually clicked, $() gets the jQuery version of it
if(t.hasClass('show')) { //If it is a 'show' element...
t.siblings('.hide').show(); //...show the other two elements...
t.siblings('.text').show();
t.hide(); //...and hide the clicked element
}
if(t.hasClass('hide')) { //If it is a 'hide' element...
t.siblings('.show').show(); //...show the 'show' element...
t.siblings('.text').hide(); //...and hide the other two
t.hide();
}
});
});
And that's it! Here's a demo.
Related
I am trying to write a JavaScript or jquery function that binds a click event to dynamically or server generated element with the class name (manage-inventory). The function should perform the following :
When clicked, it should toggle a bootstrap class (d-none) on its next sibling element(manage-inventory-card). The key is here is to remove the default "d-none" class in order to make the "manage-inventory-card" element show
When the element with the class name (manage-inventory) is clicked again, it should add the class "d-none" back to the "manage-inventory-card" element in order to hide it.
If any part of the page except the "manage-inventory-card" is clicked, the "manage-inventory-card", the class name "d-none" should be added back to it.
Clicking another dynamically generated element with the same class (manage-inventory) should close the previous "manage-inventory-card" if still open by closing it with the addition of class "d-none".
The event should work on only one instance of "manage-inventory" and "manage-inventory-card" at a time. Clicking one should not make it work on all others at the same time. There can only be a running instance
Below is the HTML code when it is dynamically generated by the server
The code only works for toggling of the "d-none" class when it is clicked. I don't know how to write the one that hides it back by adding "d-none" to the currently opened "manage-investment-card" when another element "manage-inventory" element is clicked and also write the code that closes it when any part of the page is clicked. Thank you
$(document)
.find(".manage-inventory")
.each(function(index) {
$(this).on("click", function() {
$(this)
.next()
.toggleClass("d-none");
});
});
.d-none {display: none !important;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
N30,000.00
<span class="manage-inventory">here</span>
<div class="position-absolute manage-inventory-card d-none">
<a class="edit">Edit</a>
<a class="delete">Delete</a>
</div>
</div>
<div>
N30,000.00
<span class="manage-inventory">here</span>
<div class="position-absolute manage-inventory-card d-none">
<a class="edit">Edit</a>
<a class="delete">Delete</a>
</div>
</div>
So you need to delegate.
I am delegating from document because you want to check all clicks on document
$(document).on("click", function(e) {
var $tgt = $(e.target);
if ($tgt.is(".manage-inventory")) {
var $thisChild = $tgt.next();
$(".manage-inventory-card").not($thisChild).addClass("d-none");
$thisChild.toggleClass("d-none");
} else {
$(".manage-inventory-card").addClass("d-none");
}
});
.d-none {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
N30,000.00
<span class="manage-inventory">here</span>
<div class="position-absolute manage-inventory-card d-none">1
<a class="edit">Edit</a>
<a class="delete">Delete</a>
</div>
</div>
<div>
N30,000.00
<span class="manage-inventory">here</span>
<div class="position-absolute manage-inventory-card d-none">2
<a class="edit">Edit</a>
<a class="delete">Delete</a>
</div>
</div>
i have dynamic data in my rails view, all divs have the same name; 'allData', which has alot of info, so i have it not displayed, i want to display that specific div and not all divs when i click show, but it shows all divs, i want to be able to show just that target div i clicked
$('.show'').on('click', (event) =>{
$('.allData').toggle();
$(event.currentTarget).closest('.allData').toggle();
})
<div class='eachData'>
<div class='header'>
<div class='show'> show</div>
<div class='numberOfdata'> 100</div>
</div>
<div class='allData; display:none'>
"foobar all data is here"
</div>
</div>
<div class='eachData'>
.......
</div>
<div class='eachData'>
.......
</div>
Your closest call is on the right track but you're not quite using it right. First you want to find the container (.eachData) that contains your <div class="show">, you use closest for that:
let container = $(event.currentTarget).closest('.eachData');
then you search within that container for the .allData you want to toggle by using find:
container.find('.allData').toggle();
So you use closest to go up the node tree and then find to come back down.
BTW, this:
<div class='allData; display:none'>
should be:
<div class="allData" style="display: none">
The class attribute contains CSS class names delimited by whitespace, raw CSS goes in the style attribute and is delimited by semicolons.
Your inline style on the div should be as follows:
<div class="allData" style="display: none">
Then try the following:
$('.show').on('click', function() {
$(document).find('.eachData .allData:visible').hide('fast');
$(this).parent().closest('.allData').show('fast');
});
So in an html structure like this:
<a class="member-main">
<!-- other divs and html elements -->
</a>
<div class="hidden-group-item">
<!-- other divs and html elements -->
</div>
I want to bind a click event to an html element with class .member-main so to show a hidden element .hidden-group-item.
There are plenty of those elements repeated in the page in pairs so I'd also like to show only that .hidden-group-item immediately below its respective .member-main
I'm aiming to do so with a function like below, helped by this previous question:
$('body').on('click', '.member-main', function() {
$(this).next('.hidden-group-item')[0].toggleClass('hide')
});
I can get the element associated on click through this keyword (if I console log it), but I can't seem to grab that node that'd let me traverse down to the hidden-group-item.
How does this work in this case and what would be the most efficient way to achieve this?
...[0] returns a nodeElement not a jQuery object that has the function toggleClass. Try this:
$('body').on('click', '.member-main', function() {
$(this).next('.hidden-group-item') // next is already returning one item so no need to try to access the first
.toggleClass('hide')
});
This works as expected
The docs about the .next() method says the following:
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.
Because you have the onClick handler and you're selecting the currently clicked element as $(this) then the matched set of elements is only the one you clicked, thus the next() call gets the .hidden-group-item just beneath it.
Sample
$('body').on('click', '.member-main', function() {
$(this).next('.hidden-group-item').toggleClass('hide')
});
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a class="member-main">
<!-- other divs and html elements -->
hello
</a>
<div class="hidden-group-item hide">
<!-- other divs and html elements -->
hidden
</div>
<a class="member-main">
<!-- other divs and html elements -->
hello
</a>
<div class="hidden-group-item hide">
<!-- other divs and html elements -->
hidden
</div>
<a class="member-main">
<!-- other divs and html elements -->
hello
</a>
<div class="hidden-group-item hide">
<!-- other divs and html elements -->
hidden
</div>
JSFiddle
I'm trying to make a pop-up for each item in my app to select quantity.
So it preloads several items on page, and I need to make it show pop-up when clicked on any of them.
I found this solution and tried it:
<div class="items">
<div class="menu_item_btn" href = "javascript:void(0)" onclick = "itemquantity()">
<%= item.name %>
</div>
<div id="light" class="itemshowcontent">
<p>Some content</p>
Close
</div>
<div id="fade" class="blackoverlay"></div>
</div>
where js:
<script>
function itemquantity() {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'
}
function closeitemquantity() {
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'
}
</script>
It works, however when I select quantity, it always selects it only for the first item that comes.
If click on second item (or any other), the pop-up is still for the first one.
I believe this is because I use getElementById, as ID is used for only one object.
I tried changing to getElementsByClassName, but then it doesn't work at all. So, my question is how to make it work?
Should I stick to using classes? Or somehow use ID, within classes?
I apologise if it's simple question, I'm not really familiar with JS.
Any advice appreciated.
EDIT:
Here are some images for what I'm doing. This is page with listed objects:
These are the objects preloaded from DB shown in a list. When you click on any of them, this pop-up comes up:
to select quantity.
I'm developing in elixir and phoenix framework.
Give id to each item and move light and fade out from id and to class. Then, find light and fade by item id when click function is executed. See the following example.
function getParent(itemChild) { // Get parent.
var item = itemChild.parentElement;
return item;
}
function itemquantity(itemChild) {
var item = getParent(itemChild); // Get parent and it is the item.
item.querySelector('.light').style.display='block'; // Find .light element as of item.
item.querySelector('.fade').style.display='block'; // Find .fade element as of item.
}
function closeitemquantity(itemChild) {
var item = getParent(getParent(itemChild)); // You have to get parent twice and that is the item.
item.querySelector('.light').style.display='none'; // Find .light element as of item.
item.querySelector('.fade').style.display='none'; // Find .fade element as of item.
}
<div class="items" id="apple">
<div class="menu_item_btn" href = "javascript:void(0)" onclick = "itemquantity(this)">
Apple
</div>
<div class="light itemshowcontent">
<p>Red Apple</p>
Close
</div>
<div class="fade blackoverlay"></div>
</div>
<div class="items" id="banana">
<div class="menu_item_btn" href = "javascript:void(0)" onclick = "itemquantity(this)">
Banana
</div>
<div class="light itemshowcontent">
<p>Yello Banana</p>
Close
</div>
<div class="fade blackoverlay"></div>
</div>
<div id=klik>KLIK </div>
<div class="list">
<div class="list-wrapper">
<div class="line">1</div>
<div class="line">2</div>
</div>
<div class="line">3</div>
<div class="line">4</div>
</div>
This is the Html. I use Javscript to hide the whole list first. Then I would like to make a onclick function to show just the first two elements, the two in div list wrapper. This the code i have written.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list-wrapper").show();
});
});
The problem it never shows the elements.
You are trying to show an element that is still wrapped inside a hidden parent element. In case you hide and show the same selection it is working just fine. You could do it like this:
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show().children().not('.list-wrapper').hide(); //show .list, then hide everything that is not inside .list-wrapper
});
});
Working demo
EDIT:
And fix your HTML markup (missing quotes "" ) <div id=klik>KLIK</div>
You are hiding the parent element of what you are trying to show. show will only display the elements you called it on, it won't cascade up the DOM tree.
$(document).ready(function(){
$(".list").hide();
$("#klik").click(function(){
$(".list").show(); //Show .list elements instead
});
});