My goal is to have a functionality that when a user clicks on "Label - Filter 1" then the content within div - "Filter_1_Content" appears and the other two divs slide down simultanously. However, when a user clicks on "Label - Filter 2", the content of "Filter 1" should disappear and "Filter 2" should appear while "Filter 3" slides down simoultanously. The same applys to Filter 3 and so on. Please note that at the first load of the page, only the labels should appear.
This is the jQuery code I currently have and it works for Filter 1. However, the Filter 2 and Filter 3 do not move. Any ideas?
<div id="Filter_1">
<label id="Filter1_Label">Filter 1</label>
<div id="Filter_1_Content" class"Filters">
...content
</div>
</div>
<div id="Filter_2">
<label id="Filter2_Label">Filter 2</label>
<div id="Filter_2_Content" class"Filters">
...content
</div>
</div>
<div id="Filter_3">
<label id="Filter2_Label">Filter 3</label>
<div id="Filter_3_Content" class"Filters">
...content
</div>
</div>
function SlideDiv() {
var scopeFilters = $("#Filter1_Label").next(".Filters");
if (scopeFilters.is(":hidden")) {
scopeFilters.slideDown('fast');
} else {
scopeFilters.slideUp('fast');
}
};
To achieve what you need most effectively, you can use common classes and DOM traversal to apply the common logic to a repeated HTML structure. Try this:
var $content = $('.filter-container > div');
$('.filter-container label').click(function() {
var $target = $(this).next('div');
$content.not($target).slideUp('fast');
$target.slideToggle('fast');
});
.filter-container > div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filter-container">
<label>Filter 1</label>
<div class="filters">
Content...
</div>
</div>
<div class="filter-container">
<label>Filter 2</label>
<div class="filters">
Content...
</div>
</div>
<div class="filter-container">
<label>Filter 3</label>
<div class="filters">
Content...
</div>
</div>
As you can see from the above, using incremental id attributes is making much more (unnecessary) work for yourself, and would result in much more complex JS code for absolutely no benefit.
you can try below logic where you can find parent div and then it's siblings to find other filter divs.
Slide up other filter divs and slideup clicked filter div.
$(function(){
$("div[id^='Filter_'] label").on("click", function(){
var $parent = $(this).closest("div");
$parent.siblings().find("div.Filters").slideUp("fast");
$(this).next("div.Filters").slideToggle("fast");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id="Filter_1">
<label>Filter 1</label>
<div id="Filter_1_Content" class="Filters">
...content
</div>
</div>
<div id="Filter_2">
<label>Filter 2</label>
<div id="Filter_2_Content" class="Filters">
...content
</div>
</div>
<div id="Filter_3">
<label>Filter 3</label>
<div id="Filter_3_Content" class="Filters">
...content
</div>
</div>
Related
I have several checkboxes when clicking on a certain checkbox, I want to show some content (in my case, this is a simple block for an example) when clicking on another checkbox, the previous block should hide and display a new block, I think to solve this problem you need to apply forEach checkboxes work for me, but I cannot display blocks
<div class="toggle-two">
<div><small>content 1</small></div>
<label class="switch-label">
<input class="switch" id="switch-novice" value="switch-novice" type="checkbox"/>
<span class="slider round"></span>
</label>
</div>
<div class="toggle-three">
<div><small>content 2</small></div>
<label class="switch-label">
<input class="switch" id="switch-intermediate" value="switch-intermediate" type="checkbox"/>
<span class="slider round"></span>
</label>
</div>
<div class="toggle-four">
<div><small>content 3</small></div>
<label class="switch-label">
<input class="switch" id="switch-expert" value="switch-expert" type="checkbox" />
<span class="slider round"></span>
</label>
</div>
<!-- ------------------------------------------- -->
</div>
<div>
<div class="content c1"></div>
<div class="content c2"></div>
<div class="content c3"></div>
</div>
**script.js**
let uploadPres = document.getElementsByClassName("content");
$(".content").each(function (index, value) {
$(`.switch:not([checked])`).on("change", function (param1, param2) {
$(".switch").not(this).prop("checked", false);
if ($(".switch").is(":checked")) {
console.log(this.checked);
}
});
});
Initially a class named content has display: none by default
You can also see this example in codesandbox
on each input checkbox add the reference of the associated content div like below.
<input class="switch" id="switch-novice" value="switch-novice" type="checkbox" data-content="c1"/>
OR
<input class="switch" id="switch-novice" value="switch-novice" type="checkbox" data-content="c2"/>
Now simply update your code like below.
$(`.switch`).on("change", function (a, b) {
$(".switch").not(this).prop("checked", false);
if ($(".switch").is(":checked")) {
var contentToOpen = $(this).data("content"); // read the associated class of the div
$(`.content`).hide(); // hide all existing opened ones
$(`.${contentToOpen}`).show(); // show the associated one
}
});
function toggle(event){
var container = event.target.closest(".togglers");
var currentContainer = event.target.closest(".toggle");
var index = Array.from(container.children).indexOf(currentContainer);
var checkboxes = document.querySelectorAll(".toggle input");
$(checkboxes).prop("checked",false);
$(event.target).prop("checked", true);
var contentItems = document.querySelectorAll(".content-items .content");
$(contentItems).hide();
var content = contentItems[index];
$(content).slideToggle();
}
.content {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="togglers">
<div class="toggle"><input type="checkbox" onclick="toggle(event)" />
toggle 1
</div>
<div class="toggle"><input type="checkbox" onclick="toggle(event)" />
toggle 2
</div>
<div class="toggle"><input type="checkbox" onclick="toggle(event)" />
toggle 3
</div>
</div>
<div class="content-items">
<div class="content">Content 1</div>
<div class="content">Content 2</div>
<div class="content">Content 3</div>
</div>
I have searched in several similar threads, but I do something wrong and it seems to not work.
I have this HTML structure:
<div id="form" class="inquiry-section">
<div class="inner">
<div class="inner-form-col">
<div class="inner-form"><input type="radio"><span>some label</span></div>
<div class="inner-ab">
<div class="inner-straight-ab">some content</div>
</div>
</div>
<div class="inner-form-col">
<div class="inner-form"><input type="radio"><span>some label</span></div>
<div class="inner-ab">
<div class="inner-gshape-ab">some content</div>
</div>
</div>
<div class="inner-form-col">
<div class="inner-form"><input type="radio"><span>some label</span></div>
<div class="inner-ab">
<div class="inner-pshape-ab">some content</div>
</div>
</div>
<div class="inner-form-col">
<div class="inner-form"><input type="radio"><span>some label</span></div>
<div class="inner-ab">
<div class="inner-isle-ab">some content</div>
</div>
</div>
</div>
</div>
What I want to achieve is after clicking an input in .inner-form to .slideDown() the .inner-ab in the same .inner-form-col and to .slideUp() all the .inner-ab in the other columns. I made it work with .show() / .hide() or switching a class but as I need height: auto, I cannot achieve animation AND re-flowing the content below.
Have You try jQuery Easing Plugin
http://gsgd.co.uk/sandbox/jquery/easing/
I somehow managed to make it work by using this, but I'm not 100% sure why it does:
$('.inner-form-col').each(function() {
var $dropdown = $(this);
$(".inner-form input", $dropdown).click(function(e) {
$div = $(".inner-ab", $dropdown);
$div.slideDown();
$(".inner-ab").not($div).slideUp();
});
});
I have a problem regarding jquery selectable , I have div that contains user information , this is my div
<div class="user-container" id="append_users">
<div class="fc-event draggable-user" ondblclick="sys.callUserProfile('+user.id+')" id="user_'+user.id+'"style="z-index: 9999;" onmousedown="sys.mouseDown()" onmouseup="sys.mouseLeave()">
<div class="container-fluid">
<input type="hidden" value="'+user.id+'" id="user_'+ user.id + '_value" class="userId">
<div class="row">
<div class="col-xs-3 avatar-col">
<img src="'+getUserImage(user.avatar)+'"width="100%">
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText" >'+user.fullName+'</p>
<p class="usr_Gender dataText" >Male</p>
<div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
<p class="user_id" style="float:right;margin:3px">'+user.employee_id+'</p>
</div>
</div>
</div>
</div>
</div>
and I need the whole fc-event div to function as one , so the div with id="append_users" should contain the selectable class and the div with class fc-event should be considered as selection , I tried like this
( "#append_users" ).selectable();
but all childs take the ui-selectee class and it doesn't function at all, so what I want to do is the div with class fc-event should be considered as one, I hope i am clear, anyone please help
The documentation doesn't make it hugely clear, but from looking at the code and descriptions of the demos on the jQueryUI website (http://jqueryui.com/selectable/) it can be seen that the element you execute the "selectable" command against is intended to the container for the things you want to be selectable. It will automatically make all the child elements of that element into things which can be selectable. This is logical because generally you'd want to have several selectable items in a list and be able choose one or more items to select.
So if you want your "append_users" element to be selectable, you have to make the parent of that element the target of your "selectable" command. You haven't shown what the parent is, so for the purpose of example I'm going to assume it's just another <div>:
HTML:
<div id="selectable">
<div class="user-container" id="append_users">
<div class="fc-event draggable-user" id="user_1" style="z-index: 9999;">
<div class="container-fluid">
<input type="hidden" value="1" id="user_1_value" class="userId">
<div class="row">
<div class="col-xs-3 avatar-col">
<img src="https://i.imgur.com/db4KgSp.png" width="100px">
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText" >user.fullName</p>
<p class="usr_Gender dataText" >Male</p>
<div style="position: relative"><li class="availableUnavailable"></li><li class="usr_profesion dataText" >AVAILABLE</li></div>
<p class="user_id" style="float:right;margin:3px">user.employee_id</p>
</div>
</div>
</div>
</div>
</div>
</div>
JavaScript:
$("#selectable").selectable();
See http://jsfiddle.net/s6Lmy70b/2/ for a working demonstration.
(N.B. This is using very slightly adjusted markup compared to yours, just for demonstration and to make it easier to get it working, but the principle is the same regardless of the exact content being displayed)
Given the code segment below, is there a way to write a CSS selector that targets the div of class="item_text" provided that the checkbox is checked?
<div class="row">
<div class="col-xs-1">
<input name="item_checkbox" type="checkbox" />
</div>
<div class="col-xs-11">
<div class="item_text" contenteditable="true">
To rearrange your list, drag and drop items
</div>
</div>
</div>
As has been stated in the comments, it's not possible to do this in CSS alone as CSS rules cannot traverse up the DOM.
As you've tagged the question with jQuery, you could use that instead to affect the required element when the checkbox state is changed. Try this:
$('.row :checkbox').change(function() {
$(this).closest('.row').find('.item_text').toggleClass('foo', this.checked);
});
.foo { border: 1px solid #C00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-1">
<input name="item_checkbox" type="checkbox" />
</div>
<div class="col-xs-11">
<div class="item_text" contenteditable="true">
To rearrange your list, drag and drop items
</div>
</div>
</div>
This is possible. I just rearranged the dom slightly then added some css:
input[name=item_checkbox]:checked + div.item_text {
display:none;
}
<div class="row">
<div class="col-xs-11">
<input name="item_checkbox" type="checkbox" />
<div class="item_text" contenteditable="true">
To rearrange your list, drag and drop items
</div>
</div>
</div>
That's only possible with jQuery/javascript as CSS selectors cannot traverse upwards (from child to parent).
I have a UI where more than three div's are there which has the data's with different ids but with the common button called as "Read".I have displayed the messages in which I have kept the message body as a tiny(15) on this Read button it show me the entire body of the message.How to achieve this one way that I am trying to do is as follows:
foreach (var item in Model.MyNote)
{
<div class="row">
#if (item.Owner.Roles.Any(cx => cx.RoleName == "Customer"))
{
<div class="panel">
<div class="row">
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Personal.ImageURL)" />
<span style="text-align: center;">
#item.Owner.Personal.FirstName #item.Owner.Personal.LastName
</span>
</div>
<div class="nine columns">
<input type="hidden" value="#item.Id" id="messid" />
<p class="parahide1">#item.Description </p>
<p class="parahide">#item.Description.ToTiny(15) </p>
</div>
#*Read*#
<button class="button" id="read">Read</button>
</div>
</div>
}
else if (item.Owner.Roles.Any(cx => cx.RoleName == "Professional"))
{
<div class="panel">
<div class="row">
<div class="nine columns">
<p>#item.Description </p>
</div>
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Professional.ImageURL)" />
<span style="text-align: center;">#item.Owner.Professional.CompanyName</span>
</div>
</div>
Read
</div>
}
</div>
<script type="text/javascript">
$(function () {
$(".parahide1").hide();
$("#read").live('click',function () {
$(".parahide").hide();
$(".parahide1").show();
});
});
</script>
}
This give the the result but it is showing the description of all the div's even if I click on the button of the first div.
Try finding the classes in the parent of the current button like this -
$(function () {
$(".parahide1").hide();
$("#read").on('click',function () {
$(this).parent().find(".parahide").hide();
$(this).parent().find(".parahide1").show();
});
});
Hence, only the divs present in the current button's parent will be hidden or shown!
More on .parent() and .find()
Also use .on() instead of .live() as live has been deprecated.