I've this code
jQuery(function($) {
//After it toggle the content with this button
$('.content_toggle').hide();
$('.link-toggle').before('<i class="fa fa-caret-right"></i>');
$(".link-toggle").click(function() {
$(this).toggleClass('active');
$(this).next(".project .content_toggle").slideToggle("slow");
$('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
});
//Let's the magic applies <3
});
i, h4 {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="project">
<h4 class="link-toggle">Link 1</h4>
<div id="" class="content_toggle">
<p>Hello world</p>
</div>
</div>
<div class="project">
<h4 class="link-toggle">Link 2</h4>
<div id="" class="content_toggle">
<p>Hello world</p>
</div>
</div>
It almost works, but when I click on a link, all the icons change.
I want that when I click on the first link for example, only its icon change.
The same thing when I click on the second link, only its icon change.
Thanks for you help !
Grab the current element with $(this) and navigate up to the parent with closest()
$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
jQuery(function ($) {
//After it toggle the content with this button
$('.content_toggle').hide();
$('.link-toggle').before('<i class="fa fa-caret-right"></i>');
$(".link-toggle").click(function () {
$(this).toggleClass('active');
$(this).next(".project .content_toggle").slideToggle("slow");
$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
});
//Let's the magic applies <3
});
i, h4 {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="project">
<h4 class="link-toggle">Link 1</h4>
<div id="" class="content_toggle"><p>Hello world</p></div>
</div>
<div class="project">
<h4 class="link-toggle">Link 2</h4>
<div id="" class="content_toggle"><p>Hello world</p></div>
</div>
You are toggling the class of all i, You need to toggle the class taking current element in context. So you can use .closest() to navigate to element with project class.
Use
$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
instead of
$('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
jQuery(function($) {
//After it toggle the content with this button
$('.content_toggle').hide();
$('.link-toggle').before('<i class="fa fa-caret-right"></i>');
$(".link-toggle").click(function() {
$(this).toggleClass('active');
$(this).next(".project .content_toggle").slideToggle("slow");
$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');
});
});
i,
h4 {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="project">
<h4 class="link-toggle">Link 1</h4>
<div id="" class="content_toggle">
<p>Hello world</p>
</div>
</div>
<div class="project">
<h4 class="link-toggle">Link 2</h4>
<div id="" class="content_toggle">
<p>Hello world</p>
</div>
</div>
Related
I have the following html
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
<div class="info">Text</div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
</div>
I try jquery to move "info" class, which has the previous class "swatch-option selected", at the end of the closing div class "options"
So my final html should be like
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
<div class="info">Text</div>
</div>
The jquery I tried is the following but it does not move the info class, which has the previous class swatch-option selected
<script>
require([
'jquery'
], function ($) {
$(document).ready(function(){
$('.selected.info').appendTo('.options');
})
})
</script>
$('.selected.info') means to search for an element that has both selected and info classes but they are siblings in your example.
You can use the adjacent sibling selector (+)
$(document).ready(function() {
$('.selected + .info').appendTo('.options');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
<div class="info">Text</div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
</div>
I'm trying to make 1 button show two divs when I click it using jquery.
So on click of button #show1 I want div #cybernetics + div .gif1 to appear and on click on button #show2 I want div #eat + div .gif2 to appear
Is it possible? thank you!
currently I have the following code
$('document').ready(function() {
$('#show1, #show2, #show3').click( function() {
var $div = $('#' + $(this).data('href'));
$('.demo').not($div).hide();
$div.fadeToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>
<div id="cybernetics" class="demo">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="gif1">
<img src="cybernetics.gif">
</div>
<div id="eat" class="demo">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="gif2">
<img src="eat.gif">
</div>
Simply you can show hide as per button click as bewlo.
$('.gif1, .gif2, #cybernetics, #eat').hide();
$('document').ready(function() {
$('#show1').click( function() {
$('.gif1, .gif2, #cybernetics, #eat').hide();
$('#cybernetics').show();
$('.gif1').show();
});
$('#show2').click( function() {
$('.gif1, .gif2, #cybernetics, #eat').hide();
$('#eat').show();
$('.gif2').show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>
<div id="cybernetics" class="demo">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="gif1">
<img src="cybernetics.gif">
</div>
<div id="eat" class="demo">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="gif2">
<img src="eat.gif">
</div>
I assume from the logic you're trying to keep this DRY, so you don't want multiple event handlers. As such you can select the target element based on the data-href attribute of the clicked button, then get the next() element from that and fade them both in, something like this:
$('document').ready(function() {
$('.toggle').click(function() {
var $div = $('#' + $(this).data('href'));
$('.demo').not($div).hide().next().hide();
$div.add($div.next()).fadeToggle();
});
});
.demo,
.demo + div {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" class="toggle" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" class="toggle" data-href="eat"><h2> ></h2></button>
<div id="cybernetics" class="demo">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="gif1">
<img src="cybernetics.gif">
</div>
<div id="eat" class="demo">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="gif2">
<img src="eat.gif">
</div>
You can make change to below code
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>
<div class="allBox cybernetics" style="display: none;">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="allBox cybernetics" style="display: none;">
<img src="cybernetics.gif">
</div>
<div class="allBox eat" style="display: none;">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="allBox eat" style="display: none;">
<img src="eat.gif">
</div>
and your js code goes here
<script type="text/javascript">
$("#show1").on('click', function(){
hrefVal = $(this).attr('data-href');
$(".allBox").css('display', 'none');
$("."+hrefVal).css('display', 'block');
})
$("#show2").on('click', function(){
hrefVal = $(this).attr('data-href');
$(".allBox").css('display', 'none');
$("."+hrefVal).css('display', 'block');
})
</script>
This is a solution maintaining your data structure and name convention.
I also fix a bug when clicking multiple times on the same button would fade in and out the right items.
$('document').ready(function() {
$('#show1, #show2, #show3').click( function() {
var target = $(this).data('href');
var $div = $('#' + target);
$('.demo').not($div).hide();
$(".gif img:not([src^='"+target+"'])").hide();
$(".gif img[src^='"+target+"']").show();
$div.fadeIn();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="show1" data-href="cybernetics"><h2> ></h2></button>
<button id="show2" data-href="eat"><h2> ></h2></button>
<div id="cybernetics" class="demo">
<header>
<h1>CYBERNETICS</h1>
</header>
</div>
<div class="gif">
<img src="cybernetics.gif">
</div>
<div id="eat" class="demo">
<header>
<h1>E.A.T.</h1>
</header>
</div>
<div class="gif">
<img src="eat.gif">
</div>
I was wondering how can I change glyphicon depending on if collapse element is opened.
So far I've got this code:
<div class="jumbotron ref" data-toggle="collapse" data-target="#collapse">
<div class="row">
<div class="col-md-11">
<a target="_blank" href="#"><h4 align="center">Click me.</h4></a>
</div>
<div class="col-md-1">
<span class="glyphicon glyphicon-chevron-down"> <!-- part to change-->
<div id="collapse" class="collapse">
<p style="margin-top: 75px;" align="center"></p>
</div>
.jumbotron gets the class .collapsed when you collapse the menu. You can use that class to target the glyph.
You should also add .collapsed to the .jumbotron by default since the default state is collapsed, but the class isn't applied until you click to trigger it to be collapsed.
.jumbotron.collapsed .glyphToChange {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron ref collapsed" data-toggle="collapse" data-target="#collapse">
<div class="row">
<div class="col-md-11">
<a target="_blank" href="#"><h4 align="center">Click me.</h4></a>
</div>
<div class="col-md-1">
<span class="glyphicon glyphToChange glyphicon-chevron-down">glyph</span>
<div id="collapse" class="collapse">
<p style="margin-top: 75px;" align="center"></p>
</div>
A jquery solution using toggleClass.
$( ".jumbotron" ).click(function() {
$( ".glyphicon" ).toggleClass( glyphicon-chevron-down, glyphicon-chevron-up );
});
Following are the collapse events.
show.bs.collapse This event fires immediately when the show
instance method is called.
shown.bs.collapse This event is fired
when a collapse element has been made visible to the user (will wait
for CSS transitions to complete).
hide.bs.collapse This event is
fired immediately when the hide method has been called.
hidden.bs.collapse This event is fired when a collapse element has
been hidden from the user (will wait for CSS transitions to
complete).
$('#collapse').on('hidden.bs.collapse', function () {
$(".glyphicon.glyphToChange").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
}).on('shown.bs.collapse', function () {
$(".glyphicon.glyphToChange").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron ref collapsed" data-toggle="collapse" data-target="#collapse">
<div class="row">
<div class="col-md-11">
<a target="_blank" href="#"><h4 align="center">Click me.</h4></a>
</div>
<div class="col-md-1">
<span class="glyphicon glyphToChange glyphicon-chevron-down">glyph</span>
<div id="collapse" class="collapse">
<p style="margin-top: 75px;" align="center"></p>
</div>
How to make blocks appear one by one when I click a button? One click = one block appearing.
<div class="gallery">
<div class="block">
<div class="img"></div>
</div>
<div class="block">
<div class="img"></div>
</div>
<div class="block">
<div class="img"></div>
</div>
<div class="block">
<div class="img"></div>
</div>
</div>
<button id="btn"></button>
Below is a working example using jQuery (as mentioned in your tags). A couple things to note:
I made a CSS class called hidden and added to each block.
With jQuery, I created a click handler for he button that finds the first block with the hidden class and removes that class. This has the result of displaying that block.
Here is the complete code:
<!doctype html>
<html>
<head>
<style>
.hidden { display: none; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div class="gallery">
<div class="block hidden">
<div class="img"></div>
first block
</div>
<div class="block hidden">
<div class="img"></div>
second block
</div>
<div class="block hidden">
<div class="img"></div>
third block
</div>
<div class="block hidden">
<div class="img"></div>
fourth block
</div>
</div>
<button id="btn">Click me</button>
<script>
$(function () {
$('#btn').click(function () {
$('.gallery .hidden').first().removeClass('hidden');
});
});
</script>
</body>
</html>
using only js
var count = 0;
function i(){
items = document.getElementsByClassName("block");
if(count < items.length)
items[count++].style.display = "block";
}
.block{
display: none;
}
<div class="gallery">
<div class="block">
<div class="img">1</div>
</div>
<div class="block">
<div class="img">2</div>
</div>
<div class="block">
<div class="img">3</div>
</div>
<div class="block">
<div class="img">4</div>
</div>
</div>
<button id="btn" onclick="i()">appear one by one</button>
You could just show the first one not visible. For a little improvement, instead of looking up the visibility for each function call, we cache the list of hidden blocks ($blocks) at dom load.
At the end of the function the list of visible blocks is then updated (the one that was toggled on is displayed).
Note: this does not for dynamically added blocks that are added after the initial dom load, but the code could be easily updated for that.
$blocks = $('.block:not(:visible)');
function showBlock() {
var $block = $blocks.first().css('display', 'block');
$blocks = $blocks.not( $block );
}
.block {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gallery">
<div class="block">
<div class="img"></div>
one
</div>
<div class="block">
<div class="img"></div>
two
</div>
<div class="block">
<div class="img"></div>
three
</div>
<div class="block">
<div class="img"></div>
four
</div>
</div>
<button id="btn" onclick="showBlock()">Show Block</button>
First set all blocks invisible with css:
.block { display: none; }
Then, add a handler to the button and make the first non-visible visible:
$("#btn").on("click", function () {
$(".gallery").find(".block:hidden").first().css({ display: "block"; });
});
I'm having trouble on a project I mentioned earlier, now the problem is that I want to drag a div and drop it to another div. If I drag a div then it should be added below the previously dropped div. How can I achieve that? My current code is not appending the next div dropped, it overwrites the first one. I have tried many solutions but all end up doing more damage than good. Can anybody please help me, Thank you.
<html>
<head>
<title>CRM</title>
<link rel="stylesheet" href="style/style.css" type="text/css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$(".dragable").draggable({
cancel:"a.ui-icon",
revert:true,
helper:"clone",
cursor:"move",
revertDuration:0
});
$('.droppable').droppable({
accept: ".dragable",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
// clone item to retain in original "list"
var $item = ui.draggable.clone();
$(this).addClass('has-drop').html($item);
}
});
});
</script>
</head>
<body>
<div class="main-container">
<div class="wrapper">
<div class="tb-head">
<div class="target">
<span class="target-span">Target</span>
</div>
<div class="user1">
<span class="user1-span">User1</span>
</div>
<div class="user2">
<span class="user2-span">User2</span>
</div>
<div class="user3">
<span class="user3-span">User3</span>
</div>
<div class="user4">
<span class="user4-span">User4</span>
</div>
<div class="clear"></div>
</div>
<div class="tb-body">
<div class="inner-target">
<div class="dragable">
<span class="targetinn-span">Target Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign1 Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign2 Lead</span>
</div>
<div class="dragable">
<span class="targetinn-span">Assign3 Lead</span>
</div>
</div>
<div class="inner-user1">
<div class="droppable">
<span class="user1inn-span"></span>
</div>
</div>
<div class="inner-user2">
<div class="droppable">
<span class="user2inn-span"></span>
</div>
</div>
<div class="inner-user3">
<div class="droppable">
<span class="user3inn-span"></span>
</div>
</div>
<div class="inner-user4">
<div class="droppable">
<span class="user4inn-span"></span>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
Just change this line of code
$(this).addClass('has-drop').html($item);
to this
$(this).addClass('has-drop').append($item);
By calling .html() you replaced the original html just with last dropped element.