The below code is working fine, but i want merge checked and click functions in single function. Is it possible?
$(function () {
if($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
});
$(function () {
$("#enablepromo0").click(function () {
if ($(this).is(":checked")) {
$("#PromoPanel").show(300);
} else {
$("#PromoPanel").hide(300);
}
});
});
Use the change event and trigger it, it can then detect the current state of the checkbox. I altered the code to toggle a class instead to avoid a "flash" initially.
$(function() {
$("#enablepromo0").on('change', function() {
let isChecked = !this.checked;
$("#PromoPanel").toggleClass("hidden", isChecked, {
duration: 300
});
}).trigger('change');
});
.panel {
border: solid lime 1px;
background: #ddffdd;
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
Check to show: <input type="checkbox" id='enablepromo0' />
<div class="container">
<div id="PromoPanel" class="panel hidden">
<h2>Hi There</h2>Get stoked</div>
</div>
both function do the same job so i changed something to show an alert:
$(function () {
$("#enablepromo0").click(function () {
alert("dddddd")
if($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="checkbox" id='enablepromo0'/>
<div id="PromoPanel" style="border: 1px solid red; width:50px; heigth:50px; display:none;">uuu</div>
Move the code to its own function and call as required:
function showHide() {
if ($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
}
$(function () {
showHide();
$("#enablepromo0").click(function () {
showHide();
});
});
Related
i am trying to create divs that are boxes and do the following on them
1) change the background color
2) make them look like a circle
3) create more boxes(divs)
each has a individual button to fire the events but the boxes wont show and the only the second button works,with the console.log and the console doesnt show any errors at all
here is the html code and style
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" >
</script>
<script src="Query_script.js"></script>
<div class= "packages">
<div></div>
<div></div>
</div>
<button id = "change">Turn Colors on/off</button><br>
<button id = "R-border">Rounded Corners on/off</button><br>
<button id = "create">Add an extra box </button> <br>
<style>
.packages{
border-color: black;
border-width: 5px;
height: 75 px;
width: 75 px;
}
</style>
</body>
</html>
and here is the js and query
let pack=document.getElementById("packages");
let rad= document.getElementById("R-border");
let Adder=document.getElementById("create");
let checker=true;
$(document).ready(function() {
$("#changer").click(function(){
console.log("clicked1");
if (checker==true){
$('.pack').css('background-color','red');
checker=false;
}
else{
$('.packa>div').css('background-color','white');
checker=true;
}
});
});
$(document).ready(function() {
$("#R-border").click(function(){
if(checker==true){
console.log("clicked2");
$('.pack').css("border-radius","50%");
checker=false;
}
else{
$('.pack').css("border-radius");
}
});
});
$(document).ready(function() {
$("#Adder").click(function(){
console.log("clicked3");
$('.pack').append("<div>");
});
});
Maintain CSS selector names properly
I have done some modifications to HTML and javascript. Try this... It's working properly.
let pack = document.getElementById("packages");
let rad = document.getElementById("R-border");
let Adder = document.getElementById("create");
let checker = true;
$(document).ready(function () {
$("#change").click(function () {
console.log("clicked1");
if (checker == true) {
$('.packages').css('background-color', 'red');
checker = false;
} else {
$('.packages > div').css('background-color', 'white');
checker = true;
}
});
});
$(document).ready(function () {
$("#R-border").click(function () {
console.log("clicked2");
if (checker == true) {
$('.packages').css("border-radius", "50%");
checker = false;
} else {
$('.packages').css("border-radius");
}
});
});
$(document).ready(function () {
$("#create").click(function () {
console.log("clicked3");
$('.packages').append("<div>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="Query_script.js"></script>
<div class="packages">
<div></div>
<div></div>
</div>
<button id="change">Turn Colors on/off</button>
<br>
<button id="R-border">Rounded Corners on/off</button>
<br>
<button id="create">Add an extra box</button>
<br>
<style>
.packages {
border-color: black;
border-width: 5px;
height: 75px;
width: 75px;
}
</style>
I got these panels which have options to be filtered by Red, Green and Yellow class, and another Show All option. They are behaving ok, but what I would like to achieve is following: When clicked on Show All, and after that on for example on Yellow -> it should hide everything except yellow. Also, you should be able to select only Yellow + Green, Red + Yellow etc., so that only those buttons stay selected then. And when user clicks on all three buttons, it could automatically select "Show All"...
I'm little confused about logic how to set this up so any help would be welcome, thanks a lot!
Here's a pen with example: https://codepen.io/anon/pen/YOgqRX
$('.main__container').masonry({
itemSelector: '.item',
columnWidth: '.item'
});
$("#filter-show-all").on('click', function() {
$(".item").each(function(item) {
$(this).removeClass("panel-hide");
$('.main__container').masonry();
});
});
$("#filter-red").on('click', function() {
$(".red").toggleClass("panel-hide");
$('.main__container').masonry();
});
$("#filter-green").on('click', function() {
$(".green").toggleClass("panel-hide");
$('.main__container').masonry();
});
$("#filter-yellow").on('click', function() {
$(".yellow").toggleClass("panel-hide");
$('.main__container').masonry();
});
Open my code in codePen:
CodePen
Explainations are comments along with the coding.
Head:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css">
CSS:
<style>
.main__container {
width: 100%;
}
.item {
width: 100%;
box-shadow: 1px 1px 1px rgba(0,0,0,.1);
padding: 10px;
}
#media(min-width: 800px) {
.item {
width: 49%;
}
}
.red {
background: red;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
/*added css*/
.on{
border: 3px solid blue;
}
.off{
border: none;
}
</style>
HTML:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="filters">
<button id="filter-show-all" class="on">Show all</button>
<button id="filter-red" class="on">Show red</button>
<button id="filter-green" class="on">Show green</button>
<button id="filter-yellow" class="on">Show yellow</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="main__container">
<div class="item red">
<h4>Red</h4>
</div>
<div class="item green">
<h4>Green</h4>
</div>
<div class="item red">
<h4>Red</h4>
</div>
<div class="item yellow">
<h4>Yellow</h4>
</div>
<div class="item yellow">
<h4>Yellow</h4>
</div>
<div class="item green">
<h4>Green</h4>
</div>
</div>
</div>
</div>
</div>
JQuery:
$('.main__container').masonry({
itemSelector: '.item',
columnWidth: '.item'
});
/*
Check if clicked button state is 'on' or 'off'
if it is 'on', After click, let matched color block disappear,
if it is 'off', After click, let matched color block show
*/
/* turn showAll button off, hide all the items */
function showAllOff_hideItems(){
if($('#filter-show-all').attr('class')=='on'){
$('#filter-show-all').click();
}
}
$("#filter-show-all").on('click', function() {
if($(this).attr('class')=="on"){
$(".item").each(function(item) {
$(this).hide();
});
}else{
$(".item").each(function(item) {
$(this).show();
});
}
$('.main__container').masonry();
});
$("#filter-red").on('click', function() {
showAllOff_hideItems();
if($(this).attr('class')=="on"){
$(".red").hide();
}else{
$('.red').show();
}
$('.main__container').masonry();
});
$("#filter-green").on('click', function() {
showAllOff_hideItems();
if($(this).attr('class')=="on"){
$(".green").hide();
}else{
$('.green').show();
}
$('.main__container').masonry();
});
$("#filter-yellow").on('click', function() {
showAllOff_hideItems();
if($(this).attr('class')=="on"){
$(".yellow").hide();
}else{
$('.yellow').show();
}
$('.main__container').masonry();
});
/* Esstential Coding here : */
$('.filters button').on('click',function(){
if($(this).attr('id')!="filter-show-all"){
/*Toggle the clicked button*/
if($(this).attr('class')=="on"){
$(this).attr('class','off');
}else{
$(this).attr('class','on');
}
}else{
/* if show all button is clicked */
/* if it is on, turn all the buttons off */
if($(this).attr('class')=="on"){
$('.filters button').each(function(){
$(this).attr('class','off');
});
/* if it is off, turn all the buttons on */
}else{
$('.filters button').each(function(){
$(this).attr('class','on');
});
}
}
});
Use this jquery and if it doesn't work then let me know
$('.main__container').masonry({
itemSelector: '.item',
columnWidth: '.item'
});
$("#filter-show-all").on('click', function() {
$(this).toggleClass("selected");
if($(this).hasClass("selected"))
{
$(".item").each(function(item) {
$(this).toggleClass("panel-hide");
$('.main__container').masonry();
});
}
else{
$(".item").each(function(item) {
$(this).toggleClass("panel-hide");
$('.main__container').masonry();
});
}
});
$("#filter-red").on('click', function() {
$(this).toggleClass("selected");
if($(this).hasClass("selected"))
{
$(".red").removeClass("panel-hide");
}
else
{
$(".red").addClass("panel-hide");
}
if($('#filter-red').hasClass("selected") && $('#filter-green').hasClass("selected")&& $('#filter-yellow').hasClass("selected"))
{
$($('#filter-show-all').addClass("selected"))
}
else
{
$($('#filter-show-all').removeClass("selected"))
}
$('.main__container').masonry();
});
$("#filter-green").on('click', function() {
$(this).toggleClass("selected");
if($(this).hasClass("selected"))
{
$(".green").removeClass("panel-hide");
}
else
{
$(".green").addClass("panel-hide");
}
if($('#filter-red').hasClass("selected") && $('#filter-green').hasClass("selected")&& $('#filter-yellow').hasClass("selected"))
{
$($('#filter-show-all').addClass("selected"))
}
else
{
$($('#filter-show-all').removeClass("selected"))
}
$('.main__container').masonry();
});
$("#filter-yellow").on('click', function() {
$(this).toggleClass("selected");
if($(this).hasClass("selected"))
{
$(".yellow").removeClass("panel-hide");
}
else
{
$(".yellow").addClass("panel-hide");
}
if($('#filter-red').hasClass("selected") && $('#filter-green').hasClass("selected")&& $('#filter-yellow').hasClass("selected"))
{
$($('#filter-show-all').addClass("selected"))
}
else
{
$($('#filter-show-all').removeClass("selected"))
}
$('.main__container').masonry();
});
I have some html code with below structure. when I click on tag a with "moreCases" class,div with class "container-cases" is become show and when I click on "lessCases" div with class "container-cases" is become hide but tag a with "moreCases" do n't become show.how I can solve it?
HTML:
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
JavaScript:
$(document).ready(function () {
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show').addClass('hide');
});
});
$(".lessCases").each(function () {
var less = $(this);
less.click(function () {
less.parent().removeClass('show').addClass('hide');
less.prev(".moreCases").removeClass('hide').addClass('show');
});
});
});
You have to target the parent() before using prev():
less.parent().prev(".moreCases").removeClass('hide').addClass('show');
$(document).ready(function () {
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show').addClass('hide');
});
});
$(".lessCases").each(function () {
var less = $(this);
less.click(function () {
less.parent().removeClass('show').addClass('hide');
less.parent().prev(".moreCases").removeClass('hide').addClass('show');
});
});
});
.hide{
display: none;
}
.show{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
Remove the last .addClass('hide')
$(".moreCases").each(function () {
var more = $(this);
more.click(function () {
more.next().removeClass('hide').addClass('show');
more.removeClass('show');
});
});
Working example
There is no need to iterate over the .moreCases & .lessCases instead you can simply add the click event to it. Beside since the click is on an a tag , prevent the default behavior by adding e.preventDefault
$(document).ready(function() {
$(".moreCases").click(function(e) {
$(this).next().removeClass('hide').addClass('show');
$(this).removeClass('show').addClass('hide');
});
$(".lessCases").click(function(e) {
e.preventDefault();
$(this).parent().removeClass('show').addClass('hide');
$(this).parent().prev(".moreCases").removeClass('hide').addClass('show');
});
});
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
more 1
<div class="container-cases hide">
<input type="text" />
less 1
</div>
.box-one {
border: 0.1em solid #ccc;
}
.dropdown-info {
display: none;
}
<div class="box-one">
<div class="header">
<h3 class="text-center">Sample Header</h3>
</div>
<div class="dropdown-info">
<p class="text-center">Sample Text</p>
</div>
</div>
I'm trying to open and close a div if another div is clicked on and I tried with both .toggle() and .click() but it won't work. I would like to get someone else's opinion on it. I will show how I tried accomplishing it using both methods
$(document).ready(function() {
var descriptionOpen = false;
if (descriptionOpen === false) {
$('.header').click(function() {
$('.dropdown-info').show();
descriptionOpen === true;
});
};
else if (descriptionOpen === true) {
$('.header').click(function() {
$('.dropdown-info').hide();
descriptionOpen === false;
});
};
});
$(document).ready(function() {
$('.header').toggle(function() {
('.dropdown-info').show();
}, function() {
('.dropdown-info').hide();
});
});
Just do this:
$('.header').click(function() {
$('.dropdown-info').toggle();
});
I have a issue here. I'm trying to do the slideUp and slideDown equivalent in CSS3 transitions but also want when document is clicked the div element slides up.
Here is the code
http://jsfiddle.net/RK8FZ/2/
HTML
<div id="main">
<div id="search-content">
<input type="search" placeholder="Search"/>
<input type="submit" />
</div>
<section class="wrapper">
<span id="toggle-search">Search</span>
</section>
</div>
Here is the CSS code
#main #search-content { position: relative; max-height: 0; overflow: hidden; transition: all .3s linear; background: #FFF; opacity: 0;}
#main #search-content.open { max-height: 200px; opacity: 1; }
Here is the jquery code
function toggleSearch() {
$('#toggle-search').on('click', function(event){
$('#search-content').toggleClass('open').find('input[type="search"]').focus();
$(this).text( $(this).text() === "Search" ? "Close" : "Search" );
})
$('#search-content').on ('click', function(e) {
e.stopPropagation();
});
$(document).on('click', function() {
if( $('#search-content').hasClass('open') ) {
$('#search-content').removeClass('open');
}
});
}
Can anyone figure this thing out? What it is happening is that it triggers the open and the close at the same instante.
Working DEMO
I guess this is what you need
$(function () {
toggleSearch();
})
function toggleSearch() {
$('#toggle-search').on('click', function (event) {
event.stopPropagation();
$('#search-content').toggleClass('open').find('input[type="search"]').focus();
$(this).text($(this).text() === "Search" ? "Close" : "Search");
})
}
$(document).on('click', function (e) {
$('#toggle-search').text('Close');
$('#search-content').removeClass('open');
});
$('#search-content').on('click', function (e) {
e.stopPropagation();
});
$(document).on('click', function () {
if ($(this).addClass('search-open')) {
$('#search-content').removeClass('open');
}
});
What are you checking in if condition? If you wan to check if search-open class exists then you can use
if ($(.search-open').length > 0)