I have tried this CSS, but when you click on the fist link the other two will move at the bottom, same for the other links.
I have tried to change the initial code and put the links in one class, but I don't know that much JavaScript, so probably my modifications are very wrong.
How can I move the links on one line ? So that when you click on one link the toggled list appears without affecting the link position, so all the links will still be on one line.
HTML
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
Javascript
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
CSS
.dropdown{
display:inline-block;
}
Initial code
http://jsfiddle.net/6t6BP/4/
Modified by me code
https://jsfiddle.net/Lavi2/yyfhrss0/
One solution would be to make the dropdown-container to not push elements down. You can do that, in your case, with position:absolute and position it relative to the link that triggers it.
P.S. that is not just javascript, it's jQuery.
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
.dropdown{
display:inline-block;
position:relative
}
.dropdown-container {
position:absolute;
left:0;
top:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
Full code example
$(document).ready(function(){
$("a.dropdown-link").click(function(e) {
e.preventDefault();
var $div = $(this).next('.dropdown-container');
$(".dropdown-container").not($div).hide();
if ($div.is(":visible")) {
$div.hide()
} else {
$div.show();
}
});
$(document).click(function(e){
var p = $(e.target).closest('.dropdown').length
if (!p) {
$(".dropdown-container").hide();
}
});
});
.dropdown{
display:inline-block;
vertical-align:top;
}
.dropdown-container ul{
list-style:none;
padding:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="dropdown-1" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-2" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
<div id="dropdown-3" class="dropdown dropdown-processed">
<a class="dropdown-link" href="#">Options</a>
<div class="dropdown-container" style="display: none;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
Related
This question already has answers here:
How to select first N elements with jquery?
(7 answers)
Closed 1 year ago.
I have list items:
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li class="item hidden"> 4</li>
<li class="item hidden"> 5</li>
<li class="item hidden"> 6</li>
<li class="item hidden"> 7</li>
<li class="item hidden"> 8</li>
<li class="item hidden"> 9</li>
<li class="item hidden"> 10</li>
<li class="item hidden"> 11</li>
<li class="item hidden"> 12</li>
</ul>
<div id="btn">click btn</div>
$(function () {
$('#btn').click(function(evt) {
evt.stopPropagation(); //stops the document click action
$('ul li.item').removeClass('hidden');
});
});
This jQuery code remove all class "hidden", but how to remove a class first from the first three, then the next three and etc... ?
It should look like this:
click btn
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li class="item "> 4</li>
<li class="item "> 5</li>
<li class="item "> 6</li>
<li class="item hidden"> 7</li>
<li class="item hidden"> 8</li>
<li class="item hidden"> 9</li>
<li class="item hidden"> 10</li>
<li class="item hidden"> 11</li>
<li class="item hidden"> 12</li>
</ul>
and click btn
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li class="item "> 4</li>
<li class="item "> 5</li>
<li class="item "> 6</li>
<li class="item "> 7</li>
<li class="item "> 8</li>
<li class="item "> 9</li>
<li class="item hidden"> 10</li>
<li class="item hidden"> 11</li>
<li class="item hidden"> 12</li>
</ul>
and etc...
https://jsfiddle.net/ep8dk9o5/
Each time the button is clicked, just slice up the items which has hidden class as done below:
$(function() {
$('#btn').click(function(evt) {
evt.stopPropagation(); //stops the document click action
$('ul li.item.hidden').slice(0, 3).removeClass('hidden');
});
});
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li> 1</li>
<li> 2</li>
<li> 3</li>
<li class="item hidden"> 4</li>
<li class="item hidden"> 5</li>
<li class="item hidden"> 6</li>
<li class="item hidden"> 7</li>
<li class="item hidden"> 8</li>
<li class="item hidden"> 9</li>
<li class="item hidden"> 10</li>
<li class="item hidden"> 11</li>
<li class="item hidden"> 12</li>
</ul>
<div id="btn">click btn</div>
For each .container, I want to detach() the <li> from their own<ul>and append them to each container's .destination <ul>. The problem is that all <li> are being detached from both lists and appended together on both lists.
I want to be able to create a list of all <li> that are within each .container.
So during test, all of the items with the .colored class will detach and append to the .destination--b <ul>.
$.fn.randomize = function(selector) {
(selector ? this.find(selector) : this).parent().each(function() {
$(this)
.children(selector)
.sort(function() {
return Math.random() - 0.5;
})
.detach()
.appendTo(".destination");
});
return this;
};
$("button").click(function() {
$(".container").each(function() {
$(".item").randomize();
});
});
.container {
border: 2px solid
}
.destination {
border: 2px solid
}
ul {
border: 1px solid blue
}
li {
border: 1px solid green
}
.colored {
background: silver
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container container--a">
<ul class="destination destination--a">
</ul>
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
</div>
<div class="container container--b">
<ul class="destination destination--b">
</ul>
<ul>
<li class="item colored">Item 1</li>
<li class="item colored">Item 2</li>
<li class="item colored">Item 3</li>
</ul>
<ul>
<li class="item colored">Item 1</li>
<li class="item colored">Item 2</li>
<li class="item colored">Item 3</li>
</ul>
</div>
<button>Click</button>
The class .destination is ambiguous, it's appearing in both lists, you need to specify which one exactly. You can do that by searching for a .destination from the parent element. Although I noticed that this code will merge <ul> lists into one, not sure if that's the desired behavior, you never mentioned?
$.fn.randomize = function(selector) {
(selector ? this.find(selector) : this).parent().each(function() {
$(this)
.children(selector)
.sort(function() {
return Math.random() - 0.5;
})
.detach()
.appendTo($(this).parent().find(".destination"));
});
return this;
};
$("button").click(function() {
$(".container").each(function() {
$(".item").randomize();
});
});
.container {
border: 2px solid
}
.destination {
border: 2px solid
}
ul {
border: 1px solid blue
}
li {
border: 1px solid green
}
.colored {
background: silver
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container container--a">
<ul class="destination destination--a">
</ul>
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
<ul>
<li class="item">Item 1</li>
<li class="item">Item 2</li>
<li class="item">Item 3</li>
</ul>
</div>
<div class="container container--b">
<ul class="destination destination--b">
</ul>
<ul>
<li class="item colored">Item 1</li>
<li class="item colored">Item 2</li>
<li class="item colored">Item 3</li>
</ul>
<ul>
<li class="item colored">Item 1</li>
<li class="item colored">Item 2</li>
<li class="item colored">Item 3</li>
</ul>
</div>
<button>Click</button>
The class .notshow is hidden by default and i want the div with .notshow class to be visible after clicking the Show It text inside .shownow class.
I created a jquery code but its not working.
When i click .shownow div all hidden div with .notshow class go visible.
I only want a single div with .notshow class to be visible .
Example: I want to show single div with class .notshow to be visible and if i click another div the previous div should be hidden.
Its Similar to accordion.
*I searched alot on internet but can't find any solution similar to this.
Thanks for help
JsFiddle: https://jsfiddle.net/yoxo5kfh/3/
<div class="data">
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
For this, we have to target which one you want to show, we can target it by combining..
$(this) - the element you click.
.closest - parent of both the element.
if you want some animation to use .slideDown insted of .show() and .slideUp insted of .hide()
$('body').on('click', '.shownow', function() {
$('.notshow').removeClass('nohide');
$(this).closest('.main').find('.notshow').addClass('nohide').toggle();
$('.notshow').each(function() {
if(!$(this).hasClass('nohide')){
$(this).hide();
}
});
});
.notshow {
display: none;
}
.catlist {
list-style: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
try the code below. It will remove the class from all notshow and show the closest notshow to the clicked element
Updated fiddle here.
$('.shownow').click(function() {
$(".notshow").removeClass("show")
$(this).parent().next(".notshow").addClass("show");
})
A simple show/hide using JQuery. Try the below code, when you click on 'Show It', it finds the '.notshow' in the current parent container and accordingly hides the other containers:
$('.shownow').click(function() {
$(this).parents(".main:first").find(".notshow").toggle();
});
.notshow {
display: none;
}
.catlist {
list-style: none;
}
.shownow h4 {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="data">
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
At last got somethig will be able for you
<div class="data">
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<p class="shownow"><h4>Show It</h4><p>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow"><h4>Show It</h4></div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
<p>Hello</p>
<p class="selected">Hello Again</p>
<div><span>And Again</span></div>
<script>
var elms = $( "div.notshow" )
$(document).on("click", ".title", function(event){
event.preventDefault();
$('.notshow').removeClass('show');
$(this).closest('div').next('.notshow').addClass('show');
});
</script>
let x = document.querySelectorAll('.main');
let list = document.querySelectorAll('.notshow')
let length = x.length;
for (let i = 0; i < length; i++) {
x[i].onclick = () => {
if (list[i].classList.contains('show')) {
list[i].classList.toggle('show');
} else {
for (let x = 0; x < length; x++) {
list[x].classList.remove('show');
}
list[i].classList.toggle('show'); // toggle/add
}
}
}
//let x = document.querySelectorAll('.main');
//let list = document.querySelectorAll('.notshow')
//let length = x.length;
//for (let i = 0; i < length; i++) {
// x[i].onclick = () => {
// list[i].classList.toggle('show'); // toggle/add
// }
//}
.notshow{
display:none;
}
.catlist{
list-style:none;
}
.show{
display:block;
}
<div class="data">
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
<div class="main">
<div class="title">
<div class="shownow">
<h4>Show It</h4>
</div>
</div>
<div class="notshow">
<ul class="catlist">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
</div>
</div>
I have update my answer, This will help you, just add it to your code.
<style type="text/css">
.notshow{
display: none;
}
</style>
<script type="text/javascript">
$(document).on('click','.shownow', function(){
var this_display = $
(this).parent().next('.notshow').css('display');
$('.notshow').css('display','none');
if(this_display=="block"){
$(this).parent().next('.notshow').css('display','none');
}else{
$(this).parent().next('.notshow').css('display','block');
}
});
</script>
The left is what my code does, the right is what I want it to do. When clicking on a menu item it collapses fine but I want to be able to un-collapse them after and be able to collapse all of them if I wish.
$('.nav-second').on('show.bs.collapse', function () {
$('.nav-second.in').collapse('hide');
});
html
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand"></li>
<li>
<i class="material-icons">home</i>
</li>
<li>
Overall
<ul id="overall" class="nav-second collapse">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Dashboard
<ul id="dashboard" class="nav-second collapse">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Service
<ul id="service" class="nav-second collapse">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
</ul>
If you need this approach just remove that jQuery code.
I mean this one:
$('.nav-second').on('show.bs.collapse', function () {
$('.nav-second.in').collapse('hide');
});
I am using jquery-ui for sort and drag https://johnny.github.io/jquery-sortable/.. But it doesn't append in li..
The code is like
$("#example3 ul").sortable({
placeholder: "ui-state-highlight",
connectWith: '#example3 ul'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="example3">
<ul>
<li >Item 1
<ul>
<li>Item 1 1</li>
<li>Item 1 2</li>
<li>Item 1 3</li>
</ul>
</li>
<li >Item 2<ul></ul></li>
<li >Item 3<ul></ul></li>
<li >Item 4<ul></ul></li>
</ul>
</div>
If I drag item 3 to under item 2 then it doesn't work..How can I solve this?? and also I have to detect that which li goes under which li.. please Help..
Problem is, that the empty 'ul'-Tags does not have any space and are hidden (size is equals zero). Just add a small padding to each element, then you can drag your element there. Here, have a look:
$("#example3 ul").sortable({
placeholder: "ui-state-highlight",
connectWith: '#example3 ul'
});
#example3 ul{
padding-bottom: 0.3em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="example3">
<ul>
<li >Item 1
<ul>
<li>Item 1 1</li>
<li>Item 1 2</li>
<li>Item 1 3</li>
</ul>
</li>
<li >Item 2<ul></ul></li>
<li >Item 3<ul></ul></li>
<li >Item 4<ul></ul></li>
</ul>
</div>