I have this, actually i want to make something like google images function, i mean if i click the wherever li, the expanded div is always below the row that containing li that i've clicked, anny suggestion ? Thanks
FIDDLE >>
<div class="container">
<ul>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li class="expanded">
<div>abc</div>
</li>
</ul>
</div>
JS
$(document).ready(function() {
$( ".container ul li" ).click(function() {
var id = $(this).attr('id');
var idNum = id.split('-');
var num = parseInt(idNum[1]);
var a = Math.ceil(num/4)*4;
//alert(a);
$('.container ul li').removeClass('active');
$(this).addClass('active');
$('.container ul li li.expanded').slideUp(400,function(){
$(this).insertAfter($('.container ul li #item-'+a)).slideDown(400);
})
});
});
CSS
body, ul {
margin: 0px;
padding: 0px;
}
.container {
width: 90%;
margin: 0 auto;
}
li {
width: 23%;
margin: 10px 1% 0 1%;
float: left;
list-style: none outside none;
}
li img {
width: 100%;
}
.expanded {
position: relative;
display: none;
background: #ccc;
z-index: 1;
width: 100%;
height: 500px;
}
If I understand your question correctly you want the expanded element to behave as follows:
Show if an li is clicked.
Hide when the same li is clicked.
Hide first then show again if it is visible and a different li is clicked.
There are many ways to achieve this.
One relatively simple approach would be to differentiate your li elements so you can identify which specific li was clicked. This can be a done in a number of ways, but in your case you could simply add a unique id to each li.
I have used numbers here for demonstration purposes - you may want to be a bit more descriptive in your code.
Next you need to modify your javascript to check which li was clicked. You can use your "expanded" variable to keep track of which li last activated the expanded element. (we can regard 0 as its inactive state)
So on each click you check if the clicked li previously toggled the expanded element. If it did, then simply close the element. if it didn't then close the element and re-open it using a callback function.
I hope this answers your question.
EDIT: The below snippet has been revised to move the expanded element to its clicked li's row. This will only work if there are 4 images per row.
$(document).ready(function() {
var expanded = 0;
$( ".container ul li" ).click(function(e) {
e.preventDefault();
var clicked = $(this).attr("id");
if (clicked == expanded){
$( ".expanded" ).slideUp("slow", function(){
$(".expanded").remove();
expanded = 0;
});
}else if (expanded == 0){
$(".container ul #"+Math.ceil(clicked/4)*4).after('<li class="expanded"><div>abc</div></li>');
$( ".expanded" ).slideDown("slow");
expanded = clicked;
}else{
$( ".expanded" ).slideUp("slow", function(){
$(".expanded").remove();
$(".container ul #"+Math.ceil(clicked/4)*4).after('<li class="expanded"><div>abc</div></li>');
$( ".expanded" ).slideDown("slow", function(){
expanded = clicked;
});
});
}
});
});
body, ul {
margin: 0px;
padding: 0px;
height:1000px;
}
.container {
width: 90%;
margin: 0 auto;
}
li {
width: 23%;
margin: 10px 1% 0 1%;
float: left;
list-style: none outside none;
}
li img {
width: 100%;
}
.expanded {
position: relative;
display: none;
background: #ccc;
z-index: 1;
width: 100%;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul>
<li id="1">
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li id="2">
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li id="3">
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li id="4">
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li id="5">
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li id="6">
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li id="7">
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li id="8">
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
</ul>
</div>
li.after($( ".expanded" )) is the only line of code that you need here.
$(document).ready(function() {
var expanded = false;
$( ".container ul li" ).click(function(e) {
var li =$(this);
if (expanded) {
li.after($( ".expanded" ));
$( ".expanded" ).slideUp("slow");
expanded = false;
}
else {
li.after($( ".expanded" ));
$( ".expanded" ).slideDown("slow");
expanded= true;
}
});
});
body, ul {
margin: 0px;
padding: 0px;
}
.container {
width: 90%;
margin: 0 auto;
}
li {
width: 23%;
margin: 10px 1% 0 1%;
float: left;
list-style: none outside none;
}
li img {
width: 100%;
}
.expanded {
position: relative;
display: none;
background: #ccc;
z-index: 1;
width: 100%;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<ul>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li>
<img src="http://s13.postimg.org/8caamw1af/image4.jpg" />
</li>
<li class="expanded">
<div>abc</div>
</li>
</ul>
</div>
Basically, you need to find out if same element is clicked twice (if so, just slide div up), otherwise -> slide it up (close 'previous'), and then down (re-open). Since one div is in question, referencing 'previous' doesn't have too much sense, and, actually, i am not sure how this will work with mentioned ajax... However, credits to: icktoofay (How to see if you're clicking the same element twice? Jquery), here it is:
http://jsfiddle.net/3a7pjeb9/11/
$(document).ready(function() {
var previousTarget = null;
$(".container ul li").click(function(e) {
if ($('.expanded').is(':visible') != true) {
$(".expanded").slideDown("slow");
} else {
if (this === previousTarget) {
$(".expanded").slideUp("slow");
} else {
$(".expanded").slideUp("slow");
$(".expanded").slideDown("slow");
}
}
previousTarget = this;
});
});
Is this the result you wanted ? If no, let me know, I work to a project similar to yours.
http://jsfiddle.net/3a7pjeb9/14/
$(document).ready(function() {
var expanded = false;
$( ".container ul li" ).click(function(e) {
if (expanded) {
$( ".expanded" ).slideUp("slow").children().remove();
expanded = false;
}
else {
$( ".expanded" ).slideDown("slow");
$(this).clone().appendTo('.expanded');
expanded= true;
}
});
});
Related
i am try to make just simple slider of images
images in img tag not a background image
all images have display:none only first li have active class active class is display:block
click on button add active class to only next one li and remove active from pre li
i try but it active class add with all next li tag on click on button
var btn_next = document.getElementById('next-btn');
btn_next.onclick = function() {
if ($('#main_chagen li').hasClass('acitve') === true) {
$('#main_chagen li.acitve').removeClass('acitve')
$('#main_chagen li').next().addClass('acitve');
} else {
}
}
.main_chagen {
width: 100%;
float: left;
position: relative;
}
#main_chagen img {
width: 100%;
height: 26rem;
object-fit: cover;
}
#next-btn,
#pre-btn {
position: absolute;
top: 15rem;
padding: 5px 20px;
}
#next-btn {
right: 0;
}
#pre-btn {
left: 0;
}
#main_chagen li {
display: none;
}
.img_acitve {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<ul id="main_chagen">
<li class="acitve">
<img src="1.jpg">
</li>
<li>
<img src="2.jpg">
</li>
<li>
<img src="3.jpg">
</li>
<li>
<img src="4.jpg">
</li>
<li>
<img src="5.jpg">
</li>
</ul>
<button id="next-btn">next</button>
<button id="pre-btn">pre</button>
</div>
Here is a working example.
You will need to study it a bit
$(function() {
$('button').on("click", function() {
var $cur = $('#main_chagen li.active'); // possibly active
var max = $('#main_chagen li').length; // max number of LIs
var dir = this.id.indexOf("next") === 0 ? 1:-1; // which button
var idx = $cur.length === 0 ? 0 : $cur.index()+dir; // find the index of what we want to show
if (idx >= max) idx = 0; // are we at end or beginning
if (idx < 0) idx = max-1;
$('#main_chagen li').removeClass("active").eq(idx).addClass("active");
})
$("#next-btn").click(); // show the first
});
.main_chagen {
width: 100%;
float: left;
position: relative;
}
#main_chagen img {
width: 100%;
height: 26rem;
object-fit: cover;
}
#next-btn,
#pre-btn {
position: absolute;
top: 15rem;
padding: 5px 20px;
}
#next-btn {
right: 0;
}
#pre-btn {
left: 0;
}
#main_chagen li {
display: none;
}
li.active {
display: block !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<ul id="main_chagen">
<li>
<img src="https://via.placeholder.com/150/0000FF/808080?text=1">
</li>
<li>
<img src="https://via.placeholder.com/150/0000FF/080808?text=2">
</li>
<li>
<img src="https://via.placeholder.com/150/FF00FF/808080?text=3">
</li>
<li>
<img src="https://via.placeholder.com/150/00FFFF/808080?text=4">
</li>
<li>
<img src="https://via.placeholder.com/150/AABBFF/808080?text=5">
</li>
</ul>
<button id="next-btn">next</button>
<button id="pre-btn">pre</button>
</div>
Here is my fiddle: http://jsfiddle.net/2tBGE/209/
I just want to open a div with animation after a user clicked on a menu item.
For example, when clicking on the second item, clicked item and previous item should push to the top of the page and below item should push to the bottom of the page.
jQuery(document).ready(function($) {
$('ul li a').on('click', function(){
$(this).parent().next().css({
'display':'block'
})
})
});
ul{
list-style: none;
background: #eee;
padding: 0;
margin: 0;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.js_item{
display:none;
}
li a{
position: relative;
display: block;
padding: 10px 15px;
text-decoration: none;
}
a:hover{
background: #9c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
<li>main menu1</li>
<div class="load_content_for_menu_1 js_item">1</div>
<li>main menu2</li>
<div class="load_content_for_menu_2 js_item">2</div>
<li>main menu3</li>
<div class="load_content_for_menu_3 js_item">3</div>
<li>main menu4</li>
<div class="load_content_for_menu_4 js_item">4</div>
<li>main menu5</li>
<div class="load_content_for_menu_5 js_item">5</div>
</ul>
Note: I've made a small edit to your html structure so that each .toggled_content <div> is the child of each <li>.
With the following jQuery methods you can achieve this.
slideToggle()
Display or hide the matched elements with a sliding motion.
toggleClass()
Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
find()
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
var allContent = $("li");
allContent.find(".toggled_content").hide();
$(".toggler").on("click", function() {
var $thisParent = $(this).parent();
if (!$thisParent.hasClass('open')) {
$thisParent
.parent()
.find(".open")
.toggleClass("open")
.find(".toggled_content")
.slideToggle();
}
$thisParent
.toggleClass("open")
.find(".toggled_content")
.slideToggle();
});
ul {
list-style: none;
background: #eee;
padding: 0;
margin: 0;
}
li a {
display: block;
padding: 10px 15px;
text-decoration: none;
}
a:hover {
background: #9c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main">
<li>
main menu1
<div class="toggled_content">1</div>
</li>
<li>
main menu2
<div class="toggled_content">2</div>
</li>
<li>
main menu3
<div class="toggled_content">3</div>
</li>
<li>
main menu4
<div class="toggled_content">4</div>
</li>
<li>
main menu5
<div class="toggled_content">5</div>
</li>
</ul>
Edit:
Or just use the jquery-ui accordion widget.
$("#accordion").accordion({
heightStyle: "fill",
active: 3
});
$("#accordion").on("accordionactivate", function(event, ui) {
const offset = ui.newHeader[0].offsetTop;
$([document.documentElement, document.body]).animate({
scrollTop: offset
}, 200);
});
body {
margin: 0;
}
.ui-accordion {
height: 200vh; /* simulate height with content */
background: #eee;
}
.ui-accordion-header {
margin: 0;
padding: 10px 15px;
font-weight: normal;
}
.ui-accordion-header:hover {
background: #9c0;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<div id="accordion">
<h3>main menu 1</h3>
<div>1</div>
<h3>main menu 2</h3>
<div>2</div>
<h3>main menu 3</h3>
<div>3</div>
<h3>main menu 4</h3>
<div>4</div>
</div>
This might be a little more complex than it appears, because you probably do not want any of the DIVs to be made full-screen. Rather, you want the headings of all the DIVs to remain visible, and the contents of any one content div to fill all remaining vertical space.
jQueryUI does this for you, using their accordion tabs widget. You can either include jQueryUI in your project and use their functionality, or you can examine their code and see how they did it, then modify their code to work in your own project.
To incorporate jQueryUI is simple: just add it the same way you would add jQuery, right after the call to jQuery (that is, you also need jQuery for jQueryUI to work, and the link to jQueryUI must follow the link for jQuery) See this link for a code example.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
Instead of adding .css() I have added .show(). It basically does the same by adding display:block
Try adding blow
jQuery(document).ready(function($) {
$('ul li a').on('click', function() {
$('.js_item').hide('slow')
$(this).parent().next().show('slow')
})
});
ul {
list-style: none;
background: #eee;
padding: 0;
margin: 0;
position: fixed;
bottom: 0;
width: 100%;
height: 200px;
}
.js_item {
display: none;
}
li a {
position: relative;
display: block;
padding: 10px 15px;
text-decoration: none;
}
a:hover {
background: #9c0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="main">
<li>main menu1</li>
<div class="load_content_for_menu_1 js_item">1</div>
<li>main menu2</li>
<div class="load_content_for_menu_2 js_item">2</div>
<li>main menu3</li>
<div class="load_content_for_menu_3 js_item">3</div>
<li>main menu4</li>
<div class="load_content_for_menu_4 js_item">4</div>
<li>main menu5</li>
<div class="load_content_for_menu_5 js_item">5</div>
</ul>
Hope this helps!
I have two anchor tags that both display two different divs when clicked on but I only want to display one div at a time. I also want to hide the div that is displayed when clicking outside of it. I am almost done but when i click on the first anchor and then on the second both divs are displayed (I want one at a time).
Here is my code:
//Display and hide div number 1
$("a.number_1").on("click", function(event) {
event.preventDefault();
$(".display_div_1").toggle();
event.stopPropagation();
});
$(".display_div_1").on("click", function(event) {
event.preventDefault();
event.stopPropagation();
});
$(".body").on("click", function(event) {
event.preventDefault();
$(".display_div_1").hide();
});
//Display and hide div number 2
$("a.number_2").on("click", function(event) {
event.preventDefault();
$(".display_div_2").toggle();
event.stopPropagation();
});
$(".display_div_2").on("click", function(event) {
event.preventDefault();
event.stopPropagation();
});
$(".body").on("click", function(event) {
event.preventDefault();
$(".display_div_2").hide();
});
div.body {
background-color: white;
width: 100%;
height: 400px;
border: 1px solid grey;
}
div.display_div_1 {
display: none;
}
div.display_div_2 {
display: none;
}
ul {
margin: 0 0 30px 0;
padding: 0px;
}
li {
display: inline-block;
}
a.display {
display: inline-block;
background-color: lightblue;
padding: 10px 20px;
text-decoration: none;
}
div.display {
background-color: grey;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
<ul>
<li>
Display div 1
</li>
<li>
Display div 2
</li>
</ul>
<div id="first" class="display display_div_1">
This is div 1!
</div>
<div id="second" class="display display_div_2">
This is div 2!
</div>
</div>
My jquery code was taken from the first answer from the post: https://stackoverflow.com/questions/30...
Thank you!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<H1>Blah</H1>
<div class="body">
<ul>
<li>
Display div 1
</li>
<li>
Display div 2
</li>
</ul>
<div id="1" class="display display_div_1">
This is div 1!
</div>
<div id="2" class="display display_div_2">
This is div 2!
</div>
</div>
</body>
With script
$( document ).ready(function() {
$('.number').click(function() {
$('div').hide(); //you can set a class on your divs and use that if you don't want to hide all divs
$('.body').show();
$('.number').show();
$('#' + this.id.substring(3)).show(); //show just the div you want to show
});
});
Found the answer in this post: Use jQuery to hide a DIV when the user clicks outside of it
$('a#div1').click(function() {
$("div#1").show();
});
$('a#div2').click(function() {
$("div#2").show();
});
$('a#div3').click(function() {
$("div#3").show();
});
$(document).mouseup(function (e)
{
var container = new Array();
container.push($('.display_div_1'));
container.push($('.display_div_2'));
container.push($('.display_div_3'));
$.each(container, function(key, value) {
if (!$(value).is(e.target) // if the target of the click isn't the container...
&& $(value).has(e.target).length === 0) // ... nor a descendant of the container
{
$(value).hide();
}
});
});
div.body {
background-color: white;
width: 100%;
height: 400px;
border: 1px solid grey;
}
div.display_div_1 {
display: none;
}
div.display_div_2 {
display: none;
}
div.display_div_3 {
display: none;
}
ul {
margin: 0 0 30px 0;
padding: 0px;
}
li {
display: inline-block;
}
a.display {
display: inline-block;
background-color: lightblue;
padding: 10px 20px;
text-decoration: none;
}
div.display {
background-color: grey;
width: 100px;
height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<H1>Blah</H1>
<div class="body">
<ul>
<li>
Display div 1
</li>
<li>
Display div 2
</li>
<li>
Display div 3
</li>
</ul>
<div id="1" class="display display_div_1">
This is div 1!
</div>
<div id="2" class="display display_div_2">
This is div 2!
</div>
<div id="3" class="display display_div_3">
This is div 3!
</div>
</div>
</body>
I have five parent menu items, and the third one has a child dropdown menu. When you click on the third parent menu, the dropdown menu shows up, but it pushes the fourth and fifth parents menu items to below.I'd like the dropdown menu to be below the parent menu row, without pushing any parent menu items. It's a Shopify site.
http://jsfiddle.net/3s2qhhx3/
//Main nav expanders
$(document).on('click', '#navpanel .mainnav .title', function() {
$(this).parent().addClass('active').siblings().removeClass('active');
$(window).trigger('reup-navbar');
});
var navSpeed = 150;
$(document).on('click', '#navpanel .mainnav button', function() {
//Prep animation on sublist
if ($(this).parent().hasClass('expanded')) {
$(this).html('<span class="icon-plus"></span>');
$(this).siblings('ul').stop(true, true).css('display', 'block').slideUp(navSpeed, 'linear', function() {
$(this).parent().toggleClass('expanded');
$(window).trigger('reup-navbar');
});
} else {
$(this).html('<span class="icon-cross"></span>');
$(this).siblings('ul').stop(true, true).css('display', 'none').slideDown(navSpeed, 'linear', function() {
$(window).trigger('reup-navbar');
});
$(this).parent().toggleClass('expanded');
}
$(window).trigger('reup-navbar');
});
$(document).on('click', '#navpanel .mainnav a[href="#"]', function() {
$(this).siblings('button').trigger('click');
return false;
});
#navbar #navpanel .mainnav {
position: relative;
margin: 0 auto;
}
#navbar #navpanel .mainnav > ul > .active > ul {
display: block;
text-align: center;
}
#navbar #navpanel .mainnav li li {
position: relative;
display: inline;
text-align: center;
}
<div class="mainnav">
<ul class="tier1">
<li id="blog">blog</li>
<li class="">
<a class="tier1title" href="/collections/newarrivals">New Arrivals</a>
</li>
<li class="">
<a class="tier1title" href="/#">Categories</a>
<ul class="tier2">
<li class="">
Knits
</li>
<li class="">
Tops
</li>
<li class="">
Dresses
</li>
<li class="">
Bottoms
</li>
. . .
<li class="">
<a class="tier1title" href="/collections/sale">Sale</a>
</li>
<li class="registerform">
...
</li>
</ul>
</div>
You need to set the position of your sub-menu to absolute. Also, you need to change your first <li> display to inline-block instead of inline.
CSS:
.mainnav {
position: relative;
margin: 0 auto;
}
.mainnav ul > li {
display: inline-block;
text-align: center;
}
.mainnav ul li:hover ul {
display:block;
background:red;
height:auto;
width:auto;
}
.mainnav ul li ul {
position: absolute;
display: none;
padding: 0;
margin: 0;
}
Hope it helps. Updated Fiddle..
I am trying to select the div contained within the LI element using jQuery when the LI is clicked, here's the code I have so far.
jQuery( ".about-nav-item" ).click(function() {
jQuery(this).next('.white-content').show();
});
HTML
<nav id="about-nav">
<ul>
<li class="about-nav-item">
Story
<div class="white-content">TEST</div>
</li>
<li class="about-nav-item">
Approach
<div class="white-content">TEST1</div>
</li>
<li class="about-nav-item">
Team
</li>
<li class="about-nav-item">
Network
</li>
</ul>
</nav>
The CSS:
.white-content {
width: 220%;
float: left;
margin-left: 95%;
top: -20px;
position: absolute;
background: white;
min-height: 350px;
color: black;
display: none;
}
The problem is that on clicking the element, it simply does nothing and doesn't show the element.
You need to use .children() or .find() here since .about-nav-item is the parent of .white-content div:
jQuery( ".about-nav-item" ).click(function() {
jQuery(this).find('.white-content').show(); // or jQuery(this).children('.white-content').show();
});
Fiddle Demo
You can use find() to do this:
jQuery(".about-nav-item").click(function() {
jQuery(this).find('.white-content').show();
});
Or a contextual selector:
jQuery(".about-nav-item").click(function() {
jQuery('.white-content', this).show();
});