jQuery Filter divs By Class - javascript

I'm trying to filter divs by their class, but I'm having some trouble. For some reason, if any button is pressed, everything disappears. I've been troubleshooting this for a while now and I can't figure out why this is happening. A CodePen is here and my attempt is below:
HTML:
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div class="a b">a & b</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
CSS:
div {
background: #eee;
height: 100px;
width: calc(25% - 10px);
float: left;
margin: 5px;
text-align: center;
}
.active {
color: red;
}
jQuery:
$( document ).ready(function() {
$("#all").click(function() {
$("div").fadeIn(500);
$("#all").addClass("active");
$(":not(#all)").removeClass("active");
});
$("#a").click(function() {
$(".a").fadeIn(500);
$(":not(.a)").fadeOut(0);
$("#a").addClass("active");
$(":not(#a)").removeClass("active");
});
$("#b").click(function() {
$(".b").fadeIn(500);
$(":not(.b)").fadeOut(0);
$("#b").addClass("active");
$(":not(#b)").removeClass("active");
});
$("#c").click(function() {
$(".c").fadeIn(500);
$(":not(.c)").fadeOut(0);
$("#c").addClass("active");
$(":not(#c)").removeClass("active");
});
$("#d").click(function() {
$(".d").fadeIn(500);
$(":not(.d)").fadeOut(0);
$("#d").addClass("active");
$(":not(#d)").removeClass("active");
});
});

It is because of the selector $(":not(.b)") which selects all elements and hides it except .b which will include the body element also.
You need to use a more specific selector, one option is to use a container element like
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$('#ct > div').show();
} else {
var $el = $('.' + this.id).show();
$('#ct > div').not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div id="ct">
<div class="a b">a & b</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
</div>
Using a common selector like an element selector div also may not work as it could target other non related elements, so another option is to use a common class to all elements that need to be targeted.
var $items = $('.item');
var $btns = $('.btn').click(function() {
if (this.id == 'all') {
$items.show();
} else {
var $el = $('.' + this.id).show();
$items.not($el).hide();
}
$btns.removeClass('active');
$(this).addClass('active');
})
.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div class="item a b">a & b</div>
<div class="item a">a</div>
<div class="item b">b</div>
<div class="item c">c</div>
<div class="item d">d</div>
Note: Also as you can see, there is no need to write separate click handlers for each button - given that the id of the button and the class you are looking for is the same.

The problem is this selector, for example:
:not(.d)
...will select everything that doesn't have class .d, including the body and all the buttons, etc. Restricting it more, like:
div:not(.d)
...should work. See my fix: http://codepen.io/anon/pen/cyhIK

sorting table content based on class name
May be it will help some one:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$("table tbody tr").sort(function (a, b){
return $("td", b).attr("class") < $("td", a).attr("class") ? 1 : -1;
}).appendTo('table tbody');
sort table row values based on class name:
<table>
<thead>
<th>A column</th>
</thead>
<tbody>
<tr>
<td class="x">A</td>
</tr>
<tr>
<td class="c">B</td>
</tr>
<tr>
<td class="">C</td>
</tr>
</tbody>
</table>

Related

HTML input fields as paragraph

I'm making a web calculator with 2 fields to take inputs, and I want to change its type to paragraph. How to do so? And how add listeners to support tapping on the paragraphs to make them “active” and indicate this somehow with CSS?
Once the web page gets opened somehow I want to take values from the 2 fields.
<div class="calculator">
<div class="screen"></div>
<div class="inputs">
<p id="carbs">Carbs/100g</p>
<p id="portion">Portion (g)</p>
</div>
<div class="calcul">
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button><br>
<button id="four">4</button>
<button id="five">5</button>
<button id="six">6</button><br>
<button id="seven">7</button>
<button id="eight">8</button>
<button id="nine">9</button><br>
<button id="zero">0</button>
<button id="decimal">.</button>
<button id="clear">C</button><br>
<button id="save">Save</button>
<button id="equals">=</button>
</div>
</div>
To change the input fields to paragraphs and add listeners to them, you can do the following:
const carbsField = document.querySelector("#carbs");
const portionField = document.querySelector("#portion");
carbsField.addEventListener("click", () => {
carbsField.classList.add("active");
portionField.classList.remove("active");
});
portionField.addEventListener("click", () => {
portionField.classList.add("active");
carbsField.classList.remove("active");
});
.input-field {
background-color: lightgray;
padding: 10px;
border-radius: 10px;
cursor: pointer;
display: inline-block;
}
.input-field.active {
background-color: gray;
color: white;
}
<div class="calculator">
<div class="screen">
</div>
<div class="inputs">
<p id="carbs" class="input-field">Carbs/100g: <span id="carbs-value">0</span></p>
<p id="portion" class="input-field">Portion (g): <span id="portion-value">0</span></p>
</div>
<!-- rest of the HTML code -->
</div>

How to toggle multiple divs using jQuery

I have several divs which should be shown / hidden when the corresponding button is clicked. In the initial state all buttons and all divs are visible. When the first button is clicked, only the corresponding div should be visible. When the second button is clicked, the corresponding div should be visible as well etc. The click on a button should toggle the state of the button and the corresponding div.
I'm not sure if this can be realized without placing a cookie or local storage token. So far I've created the following code, which only allows me to deactivate the divs with one first click.
$(function() {
$('.button').click(function(){
$(this).toggleClass('inactive');
$('#mydiv'+$(this).attr('target')).toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="button" target="1">Button 1</button>
<button class="button" target="2">Button 2</button>
<button class="button" target="3">Button 3</button>
</div>
<div id="mydiv1">
<p>Div 1</p>
</div>
<div id="mydiv2">
<p>Div 2</p>
</div>
<div id="mydiv3">
<p>Div 3</p>
</div>
If you want to toggle only the button/div that you just clicked, first you have to reset previous state of all elements to initial (remove class inactive and show all divs) and only than toggle state.
$(function() {
$('input[type="checkbox"]').change(function() {
let checked = $('input[type="checkbox"]:checked');
$('.inactive').removeClass('inactive');
if (checked.length == 0) {
$('.subdiv').show();
return;
}
$('input[type="checkbox"]:not(:checked)').closest('label').addClass('inactive');
$('.subdiv').hide();
checked.each(function () {
$('#mydiv' + $(this).val()).toggle();
});
});
});
.inactive {
color: red;
}
label input {
display: none;
}
label {
border: 1px solid gray;
border-radius: 3px;
padding: 2px 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<label><input type="checkbox" value="1"/>Button 1</label>
<label><input type="checkbox" value="2"/>Button 2</label>
<label><input type="checkbox" value="3"/>Button 3</label>
</div>
<div id="mydiv1" class="subdiv">
<p>Div 1</p>
</div>
<div id="mydiv2" class="subdiv">
<p>Div 2</p>
</div>
<div id="mydiv3" class="subdiv">
<p>Div 3</p>
</div>
You'd have to initially hide the divs and show the correct one when the right button is clicked.
$(function() {
$('.button').click(function() {
$(this).toggleClass('active');
$('#mydiv' + $(this).attr('target')).toggle();
});
});
/*
Hide all divs that have an id starting with "mydiv"
*/
div[id^="mydiv"] {
display: none;
}
.active {
background-color: green;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="button" target="1">Button 1</button>
<button class="button" target="2">Button 2</button>
<button class="button" target="3">Button 3</button>
</div>
<div id="mydiv1">
<p>Div 1</p>
</div>
<div id="mydiv2">
<p>Div 2</p>
</div>
<div id="mydiv3">
<p>Div 3</p>
</div>
Have you to use a toggle or you can also solve it with a walk around?
$(function() {
$('.button').click(function() {
$('.inactive').removeClass('inactive');
$(this).toggleClass('active');
$('.subdiv').show();
$('.mydiv' + $(this).attr('target')).toggle();
});
});
/*
Hide all divs that have an id starting with "mydiv"
*/
.active {
background-color: green;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="button" target="1">Button 1</button>
<button class="button" target="2">Button 2</button>
<button class="button" target="3">Button 3</button>
</div>
<div class="mydiv1" hidden>
<p>Div 1</p>
</div>
<div class="mydiv2" hidden>
<p>Div 2</p>
</div>
<div class="mydiv3" hidden>
<p>Div 3</p>
</div>

clipboard.js hover for tables

I am using clipboard.js to display a button that will allow a user to copy the specific table that the mouse is hovering over. I got it to work for one table, but I need it to work for two. Here is what I have so far:
JS
new ClipboardJS('.btn');
var clipboard = new ClipboardJS('.btn');
clipboard.on('success', function(e) {
e.clearSelection();
});
HTML
Table 1
<div class="container">
<h3>Table 1</h3>
<div id="table1" class="table1">
<div class="overlay">
<button type ="btn" class="btn btn-default pull-right tooltip" title="Copied!" style="display:none;" data-clipboard-target="#table1">
<img src="clippy.png" width="20px" title="Copy to clipboard">
</button>
</div>
<script>
$(document).ready(function () {
$(document).on('mouseenter', '.table1', function () {
$(this).find(":button").show();
}).on('mouseleave', '.table1', function () {
$(this).find(":button").hide();
});
});
</script>
<!-- TABLE 1 -->
<table>
</table>
<!-- END TABLE 1 -->
</div>
</div>
Table 2
<div class="container">
<h3>Table 2</h3>
<div id="table2" class="table2">
<div class="overlay">
<button type ="btn" class="btn btn-default pull-right tooltip" title="Copied!" style="display:none;" data-clipboard-target="#table2">
<img src="clippy.png" width="20px" title="Copy to clipboard">
</button>
</div>
<script>
$(document).ready(function () {
$(document).on('mouseenter', '.table2', function () {
$(this).find(":button").show();
}).on('mouseleave', '.table2', function () {
$(this).find(":button").hide();
});
});
</script>
<!-- TABLE 2 -->
<table>
</table>
<!-- END TABLE 2 -->
</div>
</div>
CSS
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.overlay:before{
content: ' ';
display: block;
height: 15%;
}
The hover works but it does not go away unless I am off the page rather than off the table and only one hover shows. I would like a button for each table. Could someone help? Also, if you are so kind to offer your help could you please post the code here instead of JSFiddle? I'm on my work computer at the moment and it has been blocked. Thanks!
There are several issues I have found here:
First: your buttons seem to be on the same place, this is why you only see one of them. This also makes the hover handle weirdly.
Change the CSS to:
.overlay {
position: relative;
}
Second, you can factorize all events into one jQuery call by using the same class for the containers.
<div class="container">
<h3>Table 1</h3>
<div id="table1" class="table">
<div class="overlay">
<button style="display:none;">Button A</button>
</div>
<table>
<tr>
<td>Table 1</td>
</tr>
</table>
</div>
</div>
<div class="container">
<h3>Table 2</h3>
<div id="table2" class="table">
<div class="overlay">
<button style="display:none">Button B</button>
</div>
<table>
<tr>
<td>Table 2</td>
</tr>
</table>
</div>
</div>
<script>
$(document).ready(function() {
$(document).on('mouseenter', '.table', function() {
$(this).find("button").show();
}).on('mouseleave', '.table', function() {
$(this).find(":button").hide();
});
});
</script>

Toggle div tag on button click

I have many buttons with id b1, b2 ... and each has a div tag after it with id q1, q2...
I want to toggle the div tag when the corresponding button is clicked. Example: When b1 is clicked q1 should toggle.
It is given here. http://upscfever.com/upsc-fever/en/topper/en-toppers.html
$(document).ready(function(){
$(".info").hide();
$("#b1").click(function(){
$("#q1").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1" type="button" class="btn btn-primary btn-block"></button>
<div id="q1" class="info"></div>
But as i might have 100 of buttons, how can i do the same thing without adding click on each button?
Using attribute startswith selector ^, get the id of button and get the index value from it first.
$("[id^='b']").click(function(){
var index = this.id.match(/\d+$/)[0];
$("#q" + index ).toggle();
});
Demo
$(document).ready(function() {
$(".info").hide();
$("[id^='b']").click(function() {
var index = this.id.match(/\d+$/)[0];
$("#q" + index).toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1" type="button" class="btn btn-primary btn-block">Button1</button>
<div id="q1" class="info">Info1</div>
<button id="b2" type="button" class="btn btn-primary btn-block">Button2</button>
<div id="q2" class="info">Info2</div>
<button id="b3" type="button" class="btn btn-primary btn-block">Button3</button>
<div id="q3" class="info">Info3</div>
<button id="b4" type="button" class="btn btn-primary btn-block">Button4</button>
<div id="q4" class="info">Info4</div>
Here you go with a solution
$(".info").hide();
$("button").click(function(){
$(this).next('div.info').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-primary btn-block">Button 1</button>
<div class="info">Div 1</div>
<button type="button" class="btn btn-primary btn-block">Button 2</button>
<div class="info">Div 2</div>
No need to targeting using id, you can do it using jQuery .next()
Hope this will help you.
You could change your selector from $("#b1") to something like $(".btn"), and then use the id to determine which q you want to open, like this:
$(".button").click(function(){
if(this.id){
$("#q"+this.id.substring(1)).toggle();
}
});
This way, it doesn't matter how you arrange your HTML, as long as the ids match
$(document).ready(function(){
$(".info").hide();
$(".btn").click(function(){
if(this.id){
$("#q"+this.id.substring(1)).toggle();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1" type="button" class="btn btn-primary btn-block">b1</button>
<button id="b2" type="button" class="btn btn-primary btn-block">b2</button>
<div id="q1" class="info">q1</div>
<div id="q2" class="info">q2</div>
Here you have it on JSFiddle: https://jsfiddle.net/py8q340p/
Use an extra variable state to check your state and for first time only your first div is toggled later on both the divs are toggled.
$(document).ready(function(){
var state = 0;
$(".info").hide();
$("#b1").click(function(){
if(state ==0 ) {
$('#q1').toggle();
state = 1;
}
else {
$("#q1").toggle();
$('#q2').toggle();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="b1" type="button" class="btn btn-primary btn-block">Toggle Divs</button>
<div id="q1" class="info">Hello div 1</div>
<div id="q2" class="info">Hello div 2</div>

slideToggle() method not working

I am using slideToggle() method to hide and reveal some of the long content on my website but the issue iis that it is not working properly. When clicked on Load more the hidden element's css should change from display:none; to display:block; but it wont change and the element remains hidden. I have included my code below.
<div class="categories">
<span class="acc_trigger pull-right btn">Load more</span>
<div class="acc_container">
<div class="sub-categories sec block">
<button type="button" class="btn btn-success">Button</button>
<button type="button" class="btn btn-success">Button</button>
<button type="button" class="btn btn-success">Winery</button>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".acc_container > div").hide();
jQuery(".categories span").click(function(){
jQuery(this).siblings(".acc_container > div").slideToggle();
});
})
</script>
The .siblings() method allows us to search through the siblings of these elements in the DOM tree.
You need to use
jQuery(this).siblings(".acc_container").find('div')
instead of
jQuery(this).siblings(".acc_container > div")
jQuery(document).ready(function() {
jQuery(".acc_container > div").hide();
jQuery(".categories span").click(function() {
var div = jQuery(this).siblings(".acc_container").find('div');
div.slideToggle();
$(this).text(div.is(':visible') ? 'Load less' : 'Load more');
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="categories">
<span class="acc_trigger pull-right btn">Load more</span>
<div class="acc_container">
<div class="sub-categories sec block">
<button type="button" class="btn btn-success">Button
</button>
<button type="button" class="btn btn-success">Button
</button>
<button type="button" class="btn btn-success">Winery
</button>
</div>
</div>
</div>
You can use :visible selector
jQuery(".categories span").click(function() {
var div = jQuery(this).siblings(".acc_container").find('div');
div.slideToggle();
$(this).text(div.is(':visible') ? 'Load less' : 'Load more');
});

Categories