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>
Related
Now I have multiples PHP for loop in my project exactly the same like one below but with different PHP variables of course. I also have an add button with appends a div element. The problem is because I have many for-loop and each for-loop has an add button so when I click on one add button of a particular div it appends a new div to all.
<div class="appendOuter">
<?php
foreach($query as $data){
$id = $data['ID'];
$initialAccess = $data['Access'];
if(strlen($initialAccess) > 3){
echo '
<div class="box" >
<input type="hidden" value='.$id.' class="ID">
<textarea class="Access">'.$Access.'</textarea>
</div>';
}
}
?>
<div class="text-center">
<button class="btn btn-success btn-add" type="button" onclick="addMorediv(this)">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
My javascript to append a new div
<script>
function addMorediv(index){
var element =$("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
element.appendTo('.appendOuter');
}
</script>
Assuming that all your other HTML structure is similar to what you've demoed:
element.appendTo($(this).parent().parent());
Are you looking for something like this? Where when you click the add button, it adds a new text area under the existing textarea(s) already within that row? This is a jQuery specific answer, and doesn't require the "onclick" of button that you were using. It is also adding your content within a parent "row" div for ease of access navigating the DOM during the click event. So in your PHP for loop, you would echo out 1 of the rows in my example, using your PHP variables in the appropriate places like in your example.
$('.btn-add').on('click', function() {
var $box = $(this).parent().parent().find('.box:last');
var $element = $("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
$element.appendTo($box);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appendOuter">
<!-- Assume your PHP generated 3 ".row" div rows in for loop -->
<div class="row">
<div class="box">
<input type="hidden" value="1" class="ID">
<textarea class="Access">1</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
<div class="row">
<div class="box">
<input type="hidden" value="2" class="ID">
<textarea class="Access">2</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
<div class="row">
<div class="box">
<input type="hidden" value="3" class="ID">
<textarea class="Access">3</textarea>
</div>
<div class="text-center" style="padding:10px;">
<button class="btn btn-success btn-add" type="button">
<span class="glyphicon glyphicon-plus">Add +</span>
</button>
</div>
</div>
</div>
Here is fiddle and this is my code:
$(document).ready(function(){
$( ".keywordsdiv" ).each(function(){
$(this).children(".keywords").eq(3).after('....Show More');//add a unique id to link
$(this).children(".keywords:gt(2)" ).addClass('hide');
});
});
$(document).on('click','a#playtrailershowmorebuttons',function(e){
e.preventDefault();
$(this).addClass('hide');
$(this).parent().children('button.keywords').removeClass('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="keywordsdiv">
<button class="keywords">ABC</button>
<button class="keywords">CYZ</button>
<button class="keywords">RGRDFS</button>
<button class="keywords">FVFVV</button>
<button class="keywords">FESF</button>
</div>
<div class="keywordsdiv">
<button class="keywords">ABC</button>
<button class="keywords">CYZ</button>
<button class="keywords">RGRDFS</button>
<button class="keywords">FVFVV</button>
<button class="keywords">FESF</button>
</div>
I want the script to display Show More button, if there are more than 3 buttons with keywords class in a div with class keywordsdiv, as you can see in this fiddle
This code works, If i remove the <a></a> tags in the code
You could do with find() instead of children() .because keywords not direct children of the div .
Updated jsfiddle old
$(document).ready(function() {
$(".keywordsdiv").each(function() {
$(this).find(".keywords").eq(3).after('....Show More'); //add a unique id to link
$(this).find(".keywords:gt(2)").addClass('hide');
});
});
$(document).on('click', 'a#playtrailershowmorebuttons', function(e) {
e.preventDefault();
$(this).addClass('hide');
$(this).parent().children('button.keywords').removeClass('hide');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="keywordsdiv">
<button class="keywords">ABC</button>
<button class="keywords">CYZ</button>
<button class="keywords">RGRDFS</button>
<button class="keywords">FVFVV</button>
<button class="keywords">FESF</button>
</div>
<div class="keywordsdiv">
<button class="keywords">ABC</button>
<button class="keywords">CYZ</button>
<button class="keywords">RGRDFS</button>
<button class="keywords">FVFVV</button>
<button class="keywords">FESF</button>
</div>
Updated
Updated fiddle with latest
keywordsdiv not a direct parent of the button so use with closest() and mention the parent class
And to apppend showmore element with class name instead of id .And do with click with in a classname
And remove the classname only with same classname contains element.its means find('.hide').removeClass('hide')
$(document).ready(function(){
$( ".keywordsdiv" ).each(function(){
$(this).find(".keywords").eq(3).after('....Show More');//add a unique id to link
$(this).find(".keywords:gt(2)" ).addClass('hide');
});
});
$(document).on('click','.playtrailershowmorebuttons',function(e){
e.preventDefault();
$(this).closest('.keywordsdiv').find('.hide').removeClass('hide');
$(this).addClass('hide');
});
.hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="keywordsdiv">
<button class="keywords">ABC</button>
<button class="keywords">ABC</button>
<button class="keywords">ABC</button>
<button class="keywords">ABC</button>
<button class="keywords">ABC</button>
<button class="keywords">ABC</button>
<button class="keywords">ABC</button>
<button class="keywords">ABC</button>
<button class="keywords">ABC</button>
</div>
<div class="keywordsdiv">
<button class="keywords">ABC</button>
<button class="keywords">ABC</button>
<button class="keywords">ABC</button>
<button class="keywords">ABC</button>
<button class="keywords">ABC</button>
<button class="keywords">ABC</button>
<button class="keywords">ABC</button>
<button class="keywords">ABC</button>
<button class="keywords">ABC</button>
</div>
Assign class keywords to links, not buttons:
<a class="keywords" href="#"><button>ABC</button></a>
Working fiddle:
https://jsfiddle.net/68ksyfhj/10/
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I would like to remove the div created using .append()
Example:
HTML
<input id="type_ingd" type="text">
<button class="btn btn-primary" id="add_ingd">
Add
</button>
<div class="text-left ingd-cont">
<div class="btn-group incl-ingd">
<div type="button" class="btn btn-default">
Rooms <i class="fa fa-close"></i>
</div>
</div>
<div class="btn-group incl-ingd">
<div type="button" class="btn btn-default">
Mansions <i class="fa fa-close"></i>
</div>
</div>
</div>
JS
$("#add_ingd").on('click', function(e) {
var ti = $('#type_ingd').val();
$( ".ingd-cont" ).append( '<div class="btn-group incl-ingd"><button type="button" class="btn btn-default">'+ti+' <i class="fa fa-close"></i></button></div>' );
});
$("i.fa-close").on('click', function(e) {
removeIngd(this);
});
function removeIngd(thiscont) {
$(thiscont).closest('div.incl-ingd').remove();
var iiv = $(".incl-ingd:visible").length;
if (iiv == 0){
$("#find-recp-btn").attr('style', 'display:none;');
}
}
First, I try to input a word (ex: kitchen)then click the Add button.
Then the word will append inside the ingd-cont.
And the problem is when I click the fa-close of the word it does not removed..
I'm not sure if this is possible but if it is, please help me out :)
The problem is with your selector $("i.fa-close").on('click', function(e) {...}); which does not catch events on elements, which were dynamically added.
The selector can be changed to into this to catch also the dynamically added elements:
$(".ingd-cont").on('click', 'i.fa-close', function(e) {
removeIngd(this);
});
Here is working example. I adjusted your code slightly to make it working properly ;)
$("#add_ingd").on('click', function(e) {
var ti = $('#type_ingd').val();
$( ".ingd-cont" ).append( '<div class="btn-group incl-ingd"><div type="button" class="btn btn-default">'+ti+' <i class="fa fa-close">X</i></div></div>' );
});
$(".ingd-cont").on('click', 'i.fa-close', function(e) {
removeIngd(this);
});
function removeIngd(thiscont) {
$(thiscont).closest('div.incl-ingd').remove();
var iiv = $(".incl-ingd:visible").length;
if (iiv == 0){
$("#find-recp-btn").attr('style', 'display:none;');
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="type_ingd" type="text">
<button class="btn btn-primary" id="add_ingd">
Add
</button>
<div class="text-left ingd-cont">
<div class="btn-group incl-ingd">
<div type="button" class="btn btn-default">
Rooms <i class="fa fa-close">X</i>
</div>
</div>
<div class="btn-group incl-ingd">
<div type="button" class="btn btn-default">
Mansions <i class="fa fa-close">X</i>
</div>
</div>
</div>
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>
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');
});