I know there are a lot of these threads but none seem to really fit me.
I have 5 dives with text like "this is div1, to div5". These are always gonna be shown.
And i have 5 hidden divs with text belonging to each div, that are gonna show if i click on my shown divs.
If I click div1, i want to show the hidden div1.
Right now I'm using a click function(jQuery) for every div which works but doesn't look very good in code. There has to be a better way. Any advise?
I do NOT want any of the divs to be hyperlinks, which seem to be the solution on a lot of similar threads on here.
EDIT: This is my current code.(can't get jsfiddle to work)
html
<div class="showing_div">
<p>This is a showing div</p>
</div>
<div class="hidden_div" style="display: none;>
<p>This div is hidden</p>
</div>
Jquery
$('showing_div').click(function() {
$('hidden_div').toggle();
})
This are the most used techniques:
target element using .index() and .eq()
<div id="clickables">
<div>CLICK 1</div>
<div>CLICK 2</div>
</div>
<div id="togglables">
<div>text 1</div>
<div>text 2</div>
</div>
$(function(){
$("#clickables div").click(function(){
var idx = $(this).index();
$('#togglables div').eq( idx ).slideToggle();
});
});
Pros: you can keep a really clean HTML markup, no need to assign additional classes or ID
Cons: don't put other elements inside the parents otherwise you might mess the index count
target element using .next() or other jQuery traversal methods
<div id="menu">
<div class="clickable">CLICK 1</div>
<div>text 1</div>
<div class="clickable">CLICK 2</div>
<div>text 2</div>
</div>
$(function(){
$("#menu .clickable").click(function(){
$(this).next('div').slideToggle();
});
});
target specific element using ID
<div class="clickable" id="_1" > CLICK 1 </div>
<div class="clickable" id="_2" > CLICK 2 </div>
<div id="togglable_1"> text 1 </div>
<div id="togglable_2"> text 2 </div>
$(function(){
$(".clickable").click(function(){
$("#togglable"+ this.id).slideToggle();
});
});
Pros: You can target elements unlogically positioned in the DOM
Cons: Verbose HTML; Unflexible and hardly maintainable code.
$('div').click(function() {
var text = $(this).text();
$('#'+text).show();
});
FIDDLE DEMO
As #Roko C. Buljan nicely showed there are many ways of doing it.
This is how I usually do using .data() jQuery function:
<div class="clickable" data-hidden="d1">CLICK 1</div>
<div id="d1" class="hidden">text 1</div>
<div class="clickable" data-hidden="d2">CLICK 2</div>
<div id="d2" class="hidden">text 2</div>
$(".clickable").click(function() {
$("#" + $(this).data("hidden")).toggle();
});
This way it does not matter how I organize my DOM elements. I only need to care to identify the right id in every data-hidden attribute.
Working demo
Related
I am trying to populate an array in JavaScript using jQuery. I have some <div> elements in a <section> and I only want the <div> elements that are visible (via CSS property display: block) to be added to the array.
HTML:
<section id="container">
<div>shows up 1</div>
<div style="display:none">doesn't show 2</div>
<div>shows up 3</div>
<div style="display:none">doesn't show 4</div>
<div style="display:none">doesn't show 5</div>
<div>shows up 6</div>
<div>shows up 7</div>
<div>shows up 8</div>
<div style="display:none">doesn't show 9</div>
<div>shows up 10</div>
</section>
JavaScript / jQuery
var mainList = $("#container div");
This currently gets ALL <div> elements regardless of their display. Is there some kind of filter I can put onto this call to get only the elements that are visible? It should only return the 6 <div> elements that say "shows up" in them.
Fiddle: http://jsfiddle.net/259chbj4/
Note: For this, I can't use a class that has display: none. I am looking for a solution that only modifies the JavaScript.
You can simply use the :visible selector.
$("#container div:visible");
try:
var mainList = $('#container').find("div :visible");
I am hoping someone may help me to figure out a sticking point I am at. I have tabs that are wrapped in div's that are added dynamically so at any time I do not know how many there will be. Even so, if I was to have 3 tabs, like so:
<div class="tabs">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
</div>
I am using HTML5 Drag and Drop. What I am trying to do is figure out if the current tag that I have is greater than or less than the tab that I am over so I can then drop it before or after the tab. I start to get coordinates for the getBoundingClientRect() for the element that I have, but I have not figured out how to determine whether I am greater than or less than the tab I am hovering over. For example, if I was dragging Tab 2, how would I figure out if I am past Tab 3 to drop it there after or if I dragged it before Tab 1 to drop it there.
Pretty much this gets down to being able to do some math, which I am not good at, and logic to add to my jQuery code to know where to drop the current tab I have.
Thank you for help in advance.
Less math based approach to finding out where you're hovering but requires you add an index to each tab (dynamically or otherwise):
<div class="tabs">
<div class="tab" data-index="0">Tab 1</div>
<div class="tab" data-index="1">Tab 2</div>
<div class="tab" data-index="2">Tab 3</div>
</div>
Find the tab you're currently hovering over:
$('.tab').hover(function () {
var index = $(this).data('index');
console.log(index);
console.log(this); // div itself
});
And people say you don't need math to be a programmer. Hehe!
Just check the left of the dragged div against the center (left + width)/2 of the target divs. If it's less, it's left of that div. If it's higher, it's right of the div.
Here you are: I did an example, that allow drop the element with larger id before element with smaller id.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
// get id of dragging element
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
if (data > ev.target.id) {
var parent = document.getElementsByClassName('tabs')[0]
parent.insertBefore(
document.getElementById(data), ev.target);
}
}
<div class="tabs">
<div class="tab" id="1" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Tab 1</div>
<div class="tab" id="2" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Tab 2</div>
<div class="tab" id="3" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">Tab 3</div>
</div>
Refer here: http://www.w3schools.com/html/html5_draganddrop.asp
Hope this helps.
I've created a test page, where inside each blocks the divs are sortable. But how is it possible, to let the user drag the div out of it's parent, and put inside an another sortable div?
JSFiddle: http://jsfiddle.net/zq8bqufs/
Code:
$( ".sortable, body" ).sortable();
You can use the items option to determine which items inside the element should be sortable.
JSFIDDLE
HTML
<div class="sortable">
<div class="items">
<div class="items">asd</div>
<div class="items">eee</div>
<div class="items">fff</div>
</div>
<div class="items">asd</div>
<div class="items">
<div class="items">vvv</div>
<div class="items">abbsd</div>
<div class="items">mmm</div>
</div>
<div class="items">dsa</div>
</div>
Javascript
$('.sortable').sortable({
items: '.items'
});
You need to use connectWith, more about that here.
I updated (and simplified) your fiddle with that functionality here: http://jsfiddle.net/vrx6r264/
I have the following page structure (super simplified):
I can have X (dynamic) number of idle-variables.
<div class="idle-variable">
<div class="var-container">content</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content</div>
Save
</div>
My Problem:
When I click save within the second instance of "idle-variable", I want to hide the "var-container" of the previous DIV set. Again, there can be several idle-variable divs at any given time. Anytime the save button is clicked, it should close/hide the "var-container" of the previous div set.
I've tried:
$(".var-container").hide()
$(".var-container").prev().hide();
But they are not working. The first example closes/hides both and the second will close "idle-variable".
Any thoughts here?
Try to do this
$('a').on('click', function() {
$(this).prev().toggle();
});
If you want to hide the content div immediately before the save button when you click on it, use:
$('div.idle-variable a').click(function(){
$(this).prev().hide();
})
jsFiddle example
Consider the HTML:
<div class="idle-variable">
<div class="var-container">content 1</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content 2</div>
Save
</div>
<div class="idle-variable">
<div class="var-container">content 3</div>
Save
</div>
You can hide .var-container div before the link using the jQuery code:
$('a').click(function (e) {
$(this).prev('.var-container').hide();
});
You can test this here.
I have a list where need to insert the div for the list item, if use the simple .InsertBefore, will multiply infinitely elements
How can insert the div without duplicating other items?
Example: jsfiddle.net/HJCps
Html Code
<div id="sorter">
<div class="item item-1">
<div class="text">Item 1</div>
<div class="insert">Insert Text 1</div>
</div>
<div class="item item-2">
<div class="text">Item 2</div>
<div class="insert">Insert Text 2</div>
</div>
<div class="item item-3">
<div class="text">Item 3</div>
<div class="insert">Insert Text 3</div>
</div>
</div>
JS Code
$('.insert').insertBefore('.text');
DEMO
$('.item .text').each(function(){
$(this).next('.insert').insertBefore(this);
});
References
.next()
.each
$('.item .text') will find all the elements with class text contained in class item
$('.item .text').each will loop through every matched element one by one.
$(this) refers to the current element.
$(this).next('.insert') will find the next element with the class insert
$(this).next('.insert').insertBefore(this); will insertBefore current element the matched
next element with class insert
your code $('.insert').insertBefore('.text'); will insertBefore all the elements with class insert to all elements with class .text
Something like this might suffice (if I assume your main question right):
$('.insert').each(function() {
$this = $(this);
$this.parent().prepend($this);
});
Fiddle: http://jsfiddle.net/HJCps/1/