I have a button
<button id="expansion" class="btn btn-block btn-primary">
stuff
</button>
and when i click it, i want this to either appear or disappear
<div class="container-fluid" >
<div class="row">
<div class="col-md-12">
<div style="padding:0 7%;line-height:30px;text-align:justify;" id="expandable" class="dis">
<p>lol</p>
</div>
</div>
</div>
and this is my jquery function. but when i click the button, nothing happens.
$("#expansion").click(function(){
$("#expandable").toggleClass("dis");
});
class "dis" is just display:none;
You miss the . in declaration of class and use toggle instead of toggleClass
Here is working fiddle for you.
HTML
<button id="expansion" class="btn btn-block btn-primary">
stuff
</button>
<div class="container-fluid" >
<div class="row">
<div class="col-md-12">
<div style="padding:0 7%;line-height:30px;text-align:justify;" id="expandable" class="dis">
<p>lol</p>
</div>
</div>
</div>
JS
$("#expansion").click(function(){
$("#expandable").toggle(".dis");
});
CSS
.dis{
display:none;
}
You need to assing a height to the element you want to click cuz it seems invisible.
Try this fiddle: https://jsfiddle.net/g72nr1sp/
HTML
<div class="container-fluid" >
<div class="row">
<div class="col-md-12" id="expansion" style="height:20px;">
<div style="padding:0 7%;line-height:30px;text-align:justify;" id="expandable" class="dis">
<p>lol</p>
</div>
</div>
</div>
</div>
CSS
.dis {
display:none;
}
#expansion{
background-color:lime;
height:20px;
}
Javascript
$(document).ready(function(){
$("#expansion").click(function(){
$("#expandable").toggleClass("dis");
});
});
include jquery and toggle all are working fine after that you can hide and show
$(document).ready(function(){$("#expansion").click(function(){
$("#expandable").toggle();});});
Related
everyone, I am totally new to this and I was just wondering, is there a way to auto click a button when styling display:block?
I would really appreciate if someone can point me in the right direction.
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>
You can check the display property to trigger() the click the event:
if($('#advert').css('display') == 'block')
$('#statsContinue').trigger('click');
function closeStats(){
console.log('auto click happened');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>
You could check if the element is visible using .is(':visible') then trigger the click using click() like :
if ($('#advert').is(':visible')) {
$('#statsContinue').click();
}
function closeStats() {
alert('Clik triggered');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="advert" img="" style="display: block;">
<div id="continueItems" class="text-center">
<p> TEXT HERE</p>
</div>
<br>
<div class="text-center">
<button id="statsContinue" class="btn btn-primary text-center" data-itr="continue" onclick="closeStats();">Continue</button>
</div>
</div>
I am new in javascript,i have a page consist of different Card layouts and each card has its own chart or buttons or grids,some of them should be hidden by default and some of them should be hide or visible by click,since the page is growing by more demands ,controlling these hid/e/show is becoming a nightmare,i would like you tell me whats the best way to do this?for example i have a following div which has a chart:
<section style="width:100%;margin-top:2%;" >
<div id="btnCurrentStatID" class="card ShowHide" style="float:right;width:20%;height:350px;display:none;">
<div class="wrapper">
<div class="containerBtns" style="width:100%;float:right" >
<button type="button" id="btnErrorStat" class="btnsForCrew-Common "></button>
<button type="button" id="btnIdle" class="btnsForCrew-Common "></button>
<button type="button" id="btnService" class="btnsForCrew-Common "></button>
<button type="button" id="btnLinkDn" class="btnsForCrew-Common"></button>
<button type="button" id="btnDataIn" class="btnsForCrew-Common" ></button>
<button type="button" id="btnrepOff" class="btnsForCrew-Common"></button>
</div>
</div>
</div>
<div id="faultStatChartID" class="card ShowHide" >
<div id="chart">
</div>
</div>
<div id="pieChartID" class="card ShowHide">
<div id="pieChart"></div>
</div>
</section>
<section style="width:100%;float:left;margin-top:3%;" id="faultStatSubGroupsSec">
<div id="subcatNameChartSectionID" class="card" style="width:49%;float:left;display:none">
<div class="container">
<div id="subcatNameChart"></div>
</div>
</div>
<div id="subcatErrorChartSectionID" class="card" style="width:49%;float:right;display:none">
<div class="container">
<div id="subcatErrorChart"></div>
</div>
</div>
<div id="subCatIdnameSectionID" class="card" style="width:49%;float:left;display:none">
<div class="container">
<div id="subCatIdname"></div>
</div>
</div>
<div id="subCatITurNameSectionID" class="card"style="width:49%;float:right;display:none">
<div class="container">
<div id="subCatITurName"></div>
</div>
</div>
<div></div>
<div></div>
</section>
i gave it showhide class,and by default its hidden,when i click on filter button it will be visible,and other divs should be hidden,it this continues,imagine how many time i should do it and manage to control them all,
$(".ShowHide").css("display", "block");
$("#subcatNameChartSectionID").hide();
$("#subcatErrorChartSectionID").hide();
$("#subCatIdnameSectionID").hide();
$("#subCatITurNameSectionID").hide();
A way would be to use a class for hiding.
.hide {
display: none;
}
And a hideable class for accessing every item that should be able to be hidden. The class hide can be added to hide the element.
<div class="hideable">1 hideable</div>
jQuery offers methods for class manipulation:
$('.hideable').toggleClass('hide');
$('#unique4').removeClass('hide');
$('#unique5').addClass('hide');
Here is the full snippet code:
$('.hideable').toggleClass('hide');
$('#unique4').removeClass('hide');
$('#unique5').addClass('hide');
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="unique1" class="hideable">
1 hideable
</div>
<div id="unique2" class="hideable">
2 hideable
</div>
<div id="unique3" class="hideable hide">
3 hideable
</div>
<div id="unique4" class="hideable hide">
4 hideable
</div>
<div id="unique5" class="hide">
5 other
</div>
So I have the following code:
https://jsfiddle.net/8rhscamn/
<div class="well">
<div class="row text-center">
<div class="col-sm-1"> </div>
<div class="col-sm-5 col-xs-12">
<button type="button" class="btn btn-success" id="butt1" onclick="alert('Hola')">Button <br />One</button>
</div>
<div class="col-sm-5 col-xs-12">
<button type="button" class="btn btn-default" id="butt2" onclick="alert('Hello')">Button <br />Two</button>
</div>
<div class="col-sm-1"> </div>
</div>
</div>
It is a simple bootstrap well with columns inside that contains buttons that should execute a simple alert command. Problem is, when resized to the xs size column (like in the fiddle I am including), the buttons don't work. The buttons don't even are recognized as such (this is, the mouse indicator does not switch to the hand indicator when the pointer is over the button).
Any clue what I am doing wrong? Any help will be appreciated, thanks!
Your last div
<div class="col-sm-1"> </div>
Do you need it? If you delete this div you can click on button, because this div cover your button so you can't click on it.
Simply remove the col-xs-12 classes. By default, the col-sm-* classes become full-width on small screen widths anyway. The floats in col-xs-* were causing the issue.
JSFiddle
If you were using the col-sm-1 elements as horizontal padding, I suggest you use the col-sm-offset-* classes, eg
<div class="row">
<div class="col-sm-5 col-sm-offset-1">
<button>...</button>
</div>
<div class="col-sm-5">
<button>...</button>
</div>
</div>
JSFiddle
<!-- Their are 2 ways. either make a function or can go through the second way -->
function f(thetext)
{
alert(thetext);
}
<button type="button" class="btn btn-success" id="butt1" onclick="f('text1')">Button <br />One</button>
<button type="button" class="btn btn-default" id="butt2" onclick="f('text2')">Button <br />Two</button>
<!--Or you can go the following way by deleting the following line in your code.-->
<div class="col-sm-1"> </div>
I have the following code
Html markup
<div>
<div class="col-md-6">
<button type="button" class="adddate">Add Date</button>
</div>
<div class="col-md-12 form-group">
<div class="datesaccordion panel-group">
</div>
</div>
</div>
<div>
<div class="col-md-6">
<button type="button" class="adddate">Add Date</button>
</div>
<div class="col-md-12 form-group">
<div class="datesaccordion panel-group">
</div>
</div>
</div>
<div>
<div class="col-md-6">
<button type="button" class="adddate">Add Date</button>
</div>
<div class="col-md-12 form-group">
<div class="datesaccordion panel-group">
</div>
</div>
</div>
Jquery Code
$(document.body).on("click", ".adddate", addDate);
function addDate(e) {
$(e.target).closest(".datesaccordion").append($("<p />").html("test"));
}
Here i am trying to insert the DHTML on .adddate button click. And i want to inter the DHTML in the closest .datesaccordion div from .adddate button. But the jquery code
(above mentioned) is not working.
Can anybody please tell me what i am missing??
It should be
$(document).on("click", ".adddate", addDate);
function addDate(e) {
$(this).parent().next().find(".datesaccordion").append($("<p />").html("test"));
}
Demo: Fiddle
The datesaccordion element is not a ancestor of the button, it is a descdendant of the next sibling of the buttons's parent, so you cannot use .closest() here
Try:
$(document).on("click", ".adddate", addDate);
instead of:
$(document.body).on("click", ".adddate", addDate);
as well as changing your addDate() function to this:
function addDate(e) {
$(this).parent().siblings('.col-md-12').find('.datesaccordion').append($("<p />").html("test"));
}
I am using bootstrap for my project.
It is the structure i am following to design layout-
<div class="row-fluid">
<div class="expand-this">
<div class="span8">
<div class="row-fluid">
<div class="span6 pull-left">
<b>Display Name</b>
</div>
<div class="span6 pull-right">
<input type="text"/>
</div>
</div>
</div>
</div>
<div class="hide-accordion">
<div class="span4">
<div class="block">
...some information..
</div>
</div>
</div>
<button class="button-hiding"></button>
Here you can see i am aligning two block in a row. Second span in row-fluid with span4 Is taking dynamic values.
So i am trying to hide it with button.
jQuery-
$('.hide-accordion').hide();
$(function () {
$('.button-hiding').click(function () {
$('.hide-accordion').toggle(this);
});
});
This is what working fine.
I am hiding this accordion on window load.
What i want-
I want span8 to take full width with span12 when accordion is hidden and as soon as i click on button, accordion appears. then it should be taking original span8 width.
I tried this too with jQuery-
$('.hide-accordion').hide();
$(function () {
$('.button-hiding').click(function () {
$('.hide-accordion').toggle(this);
$('.Expand-this>div .span8').removeClass('span8');
$(this).addClass('span12');
});
});
But no luck, help?
Try with this,
HTML:-
<div class="row-fluid">
<div class="span8 expand-this">
<div class="row-fluid">
<div class="span6 pull-left">
<b>Display Name</b>
</div>
<div class="span6 pull-right">
<input type="text"/>
</div>
</div>
</div>
<div class="span4 hide-accordion">
<div class="block">
...some information..
</div>
</div>
<div>
<button class="button-hiding"></button>
And Jquery:-
$(function () {
$('.hide-accordion').hide();
$(".expand-this").removeClass("span8").addClass("span12")
$('.button-hiding').click(function () {
if($(".expand-this").hasClass('span8')){
$(".expand-this").removeClass("span8").addClass("span12")
}else{
$(".expand-this").removeClass("span12").addClass("span8")
}
$('.hide-accordion').toggle();
});
});