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.
Related
I'm working with slideToggle function with jQuery. When I click on the div everything is working just fine I mean the toggle. But I have a problem that when I click on the div one div every element moves. Is there a way how to move only the div that I clicked ???
$(document).ready(function(){
$("#toggle").click(function(){
$("#test").slideToggle("slow");
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-4">
<img src="assets/kids-2580991_1920.jpg" class="d-block w-100" alt="https://www.vavaland.sk/">
<div class="bottom-left" id="toggle">Pohybová príprava JUNIOR a TEEN</div>
<div id="test" style="display: none;padding:50px;">testjandkansdlkjnaskjdnkajsdnjkasndkjansdkjanjkasd</div>
</div>
EDIT : See the gif for more understanding
https://giphy.com/gifs/dBOZRXfUNm2pkmuRGa
I have code:
<div class="addButton col-lg-6">
<button type="button" class="btn btn-primary" data-toggle="modal">BTN</button>
</div>
<div class="table-responsive">
<div id="PositionDataTable2_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div id="PositionDataTable2_processing" class="dataTables_processing" style="display: none;">Processing...</div>
// place where <div class="addButton"> should appear
<div id="PositionDataTable2_filter" class="dataTables_filter"></div>
<div class="dataTables_paginate paging_simple_numbers" id="PositionDataTable2_paginate"></div>
</div>
</div>
I want to take first div, which has addButton class and put into div PositionDataTable2 and place it between the processing and filter parts. But append and prepend only does it inside div start or end.
Also it would be great, if someone would suggest how to place it correctly and make a copy or so that my button wouldn't disappear on datatable fndestroy and recreate.
You could try using the $.after() insert like:
$(".dataTables_processing").after($(".addButton").html());
Jquerys insertAfter() should work.
Try something like this:
$('div.addButton').insertAfter('div#PositionDataTable2_wrapper');
EDIT: If you don't want that the first addButton disappears you could use .clone()
$('div.addButton').clone().insertAfter('div#PositionDataTable2_wrapper');
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/
So I'm trying to make a div class element toggle/ or show hide an set of id elements upon mouse click. So on click on the 'result_location id' I'm trying to display all the divs under result_menu class beneath it.
Am I going the right way about this? Hope you can help! Here's my HTML and JS code:
HTML:
<div id="result_location">
<h3>MainText Here</h3>
</div>
<div class="result_menu">
<div id="a_column">
<h4>text</h4>
</div>
<div id="b_column">
<h4>text</h4>
</div>
<div id="c_column">
<h4>text</h4>
</div>
<div id="d_column">
<h4>text</h4>
</div>
</div>
</div>
</div>
JS:
$(document).ready(function() {
$('#result_location').click(function() {
$('.result_menu').slideToggle("fast");
});
});
It appears to be working fine for me, I threw up a quick html page without a problem. Only thing I can think of is that you must load jquery before the JS that you mentioned. Other than that it should be working!
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