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');
});
Related
when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()
<button
class="button-default button-m panel-heading-margin"
type="button"
ng-if="!$last"
ng-click="deleteButton();"
>
<i class="icon16 icon-delete v-sub di-block mr-0"></i>
</button>
<div class="modal-footer mt-10 p-0">
<div
id="deleteview"
class="bg-gray-light row"
ng-show="$scope.displayModal"
>
<div class="col-md-9">
<h4 class="p-15 text-left">
You are going to <b>Delete</b> the <b>Mapping</b> you have
selected. Are you sure you want to continue?
</h4>
</div>
<div class="col-md-3">
<div class="pt-25 text-right pr-5">
<button class="button-cancel button-m">Cancel</button>
<button id="deletesinglemap" class="button-m button-primary">
Delete
</button>
</div>
</div>
</div>
<div id="addview" class="pull-right p-20" ng-hide="$scope.displayModal">
<span class="button-cancel" data-dismiss="modal">Cancel</span>
<button id="addmapping" class="button-m button-primary" type="button">
Add
</button>
</div>
</div>
Controller:
$scope.slideUpModal = function () {
$scope.displayModal = true;
$("#deleteview").show();
$("#addview").hide();
};
when clicked on a button there should be a div to be shown that "Are u sure, u want to delete"
else other div should be shown.
i am trying either ways using ng-show or show()
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>
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>
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>