I'm building a form that's supposed to hide and show content according to checkbox selections made by the user. No luck so far in identifying where the error in my code is. Any help will be appreciated. Thanks!
function documentFilter(trigger, target) {
$(trigger).change(function () {
if ($(trigger).checked)
$(target).show();
else
$(target).hide();
});
}
documentFilter("triggerDiv", "hideableDiv");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="checkbox" id="triggerDiv" > Some caption </label>
<div id="hideableDiv" class="well">
Some hidable content </div>
You were not sending the correct jQuery string to your function.
Change:
documentFilter("triggerDiv", "hideableDiv");
to:
documentFilter("#triggerDiv", "#hideableDiv"); // notice the '#'s to grab ids
It would be more concise to just toggle the hideableDiv whenever the checkbox state changes.
If the checkbox state is always unchecked on load, just hide the div on page load.
If the checkbox state is determined dynamically, then you'd need to check the prop checked state on page load to hide or show the div initially.
function documentFilter(trigger, target) {
$(trigger).on('change', function () {
$(target).toggle();
});
}
documentFilter("#triggerDiv", "#hideableDiv");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="checkbox" id="triggerDiv" > Some caption </label>
<div id="hideableDiv" class="well" style="display:none">
Some hidable content </div>
Your selectors aren't the best. I'd do the following:
Hide the div when the page loads using jQuery's .hide()
Listen for the checkbox to be clicked
When the checkbox is clicked, check to see if the current state of the checkbox is checked using this.checked
Based on the current state, either hide() or show()
DEMO: http://jsbin.com/zukobufefe/edit?html,js,output
$("#hideableDiv").hide();
$("input[type=checkbox]").click(function() {
if (this.checked)
{
$("#hideableDiv").show();
}
else
{
$("#hideableDiv").hide();
}
});
Your selectors are bad. If you want to find by id you shoud use # before id
To get checked state use .prop
You can use .toggle(state) to show/hide element according to passed state
Try this:
function documentFilter(trigger, target) {
var $target = $(target);
$(trigger).change(function() {
$target.toggle(this.checked);
});
}
documentFilter("#triggerDiv", "#hideableDiv");
Related
I have the following code that I use to hide/show a div using a drop-down. If the Value of the drop-down is 1, I show the div, otherwise I hide it.
var pattern = jQuery('#pattern');
var select = pattern.value;
pattern.change(function () {
if ($(this).val() == '1') {
$('#hours').show();
}
else $('hours').hide();
});
The select drop down retrieves its value from the database using form model binding:
<div class="form-group">
<label for="pattern" class="col-sm-5 control-label">Pattern <span class="required">*</span></label>
<div class="col-sm-6">
{{Form::select('pattern',['0'=> 'Pattern 0','1'=> 'Pattern 1'],null,
['id'=>'pattern','class' => 'select-block-level chzn-select'])}}
</div>
</div>
This select drop-down then hides or shows the following div:
<div id="hours" style="border-radius:15px;border: dotted;" >
<p>Example text</p>
</div>
The problem:
The div won't be hidden if the pattern stored in the database is set to 0. I have to manually select "Pattern 0" from the drop down to change it. I know that is due to the .change() method. But how do I make it hide/show on page load?
Usually in such case I store the anonymous function reference as below:
var checkPattern = function () {
if ($('#pattern').val() == '1') {
$('#hours').show();
}
else $('#hours').hide();
}
It makes the code ready to use in more then one place.
Now your issue could be resolve in a more elegant way:
$(document).ready(function(){
// add event handler
$('#pattern').on('change', checkPattern);
// call to adjust div
checkPattern();
});
Well, if the element "should" be visible by default, you just then have to check condition to "hide it" (you don't have to SHOW an element that is already visible...) :
if(pattern.value != %WHATEVER%) { $('#hours').toggle(); }
Then, to switch display on event or condition or whatever :
pattern.change(function(evt){
$('#hours').toggle();
});
Not sure that your event will work. I'd try something like
$(document).on(..., function(evt){
//behaviour
});
http://api.jquery.com/toggle/
https://learn.jquery.com/events/handling-events/
I'm trying to make a text editable on clicking it. Below is the code I'm trying. When the title is clicked it shows an input box and button to save it.
<div class="block">
<div class="title">Title</div>
<div class="title-edit">
<input type="text" name="title" value="Title">
<button>Save</button>
</div>
</div>
I have changed other properties like color or changing the text of the elements and its working, but it is not applying the display property or .show()/.hide() function on the title or edit elements.
Below is my jQuery
$(function(){
$('.block').on('click', editTitle);
$('.title-edit button').on('click', saveTitle);
});
function saveTitle(){
var parent = $(this).closest('.block');
var title = $('.title', parent);
var edit = $('.title-edit', parent);
$(title).show();
$(edit).hide();
}
function editTitle(){
$('.title-edit', this).show();
$('.title', this).hide();
}
Here's the jsfiddle
https://jsfiddle.net/ywezpag7/
I've added
$(title).html('abcd');
to the end to show that other properties/functions are working, but just not the display.
For checking the html change on title element you will have to check the source through developer tools cause the title element is hidden.
Where am I going wrong?
Your problem is in the function saveTitle. The first line must stop the event propagation otherwise after this function the editTitle function is called.
The snippet:
$(function(){
$('.block').on('click', editTitle);
$('.title-edit button').on('click', saveTitle);
});
function saveTitle(e){
// this line
e.stopPropagation();
var parent = $(this).closest('.block');
var title = $('.title', parent);
var edit = $('.title-edit', parent);
title.show();
edit.hide();
title.text($('.title-edit input').val());
}
function editTitle(e){
$('.title-edit', this).show();
$('.title', this).hide();
}
.title-edit{
display:none
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="block">
<div class="title">Title</div>
<div class="title-edit">
<input type="text" name="title" value="Title">
<button>Save</button>
</div>
</div>
The issue as mentioned already is that your click events are fighting. In your code, the title-edit class is within the block, so when you click on the save button it triggers events for both clicks.
The easiest and, imho, cleanest way to resolve this is to switch your click event to be called on .title, and .title-edit button. You can also simplify the code beyond what you've got there.
$(function(){
$('.title').click(editTitle);
$('.title-edit button').click(saveTitle);
});
function saveTitle(){
$('.title').show();
$('.title-edit').hide();
$(title).html('abcd');
}
function editTitle(){
$('.title-edit').show();
$('.title').hide();
}
https://jsfiddle.net/ywezpag7/7/
I tried debug your code, and I had seen, that then you click to "Save" button, handled both functions, saveTitle() and editTitle(), and in that order. Therefore, the elements initially hidden, and then shown.
What I'd like to do is have all elements of class collapsible_list not displayed by default (with one exception... see below*), and then toggle their display when their parent <div class="tab_box"> is clicked. During the same click, I'd also like for every other element of class collapsible_list to be hidden so that only one of them is expanded at any given time.
*Furthermore, when the page initially loads I'd also like to check to see if an element of collapsible_list has a child a element whose class is activelink, and if there is one then I'd like that link's parent collapsible_list element to be the one that's expanded by default.
Here's some sample html code:
<style>
.collapsible_list {
display: none;
}
.collapsible_list.active {
display: block;
}
</style>
<div id="sidebar">
<div class="tab_box">
<div class="collapsible_tab">2014</div>
<div class="collapsible_list panel-2014">
1
2
3
</div>
</div>
<div class="tab_box">
<div class="collapsible_tab">2013</div>
<div class="collapsible_list panel-2013">
<a class="activelink" href="/2013/1">1</a>
2
3
</div>
</div>
</div>
And here's where I'm currently at with the javascript (although I've tried a bunch of different ways and none have worked like I'd like them to):
$(document).ready(function() {
// This looks redundant to me but I'm not sure how else to go about it.
$(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active");
$(".tab_box").click(function() {
$(this).children(".collapsible_list").toggleClass("active").slideToggle("slow", function() {
$(".collapsible_list.active:not(this)").each(function() {
$(this).slideToggle("slow");
});
});
});
});
I hope that's not too confusing, but if it is then feel free to let me know. Any help is much appreciated.
Since you have a dom element reference that needs to be excluded use .not() instead of the :not() selector
jQuery(function ($) {
// This looks redundant to me but I'm not sure how else to go about it.
$(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active").show();
$(".tab_box").click(function () {
var $target = $(this).children(".collapsible_list").toggleClass("active").stop(true).slideToggle("slow");
//slidup others
$(".collapsible_list.active").not($target).stop(true).slideUp("slow").removeClass('active');
});
});
Also, instead of using the slide callback do it directly in the callback so that both the animations can run simultaniously
Also remove the css rule .collapsible_list.active as the display is controlled by animations(slide)
Try This.
$('.collapsible_tab a').on('click', function(e){
e.preventDefault();
$('.collapsible_list').removeClass('active')
$(this).parent().next('.collapsible_list').toggleClass('active');
});
Fiddle Demo
I think your code would be less complicated if you simply remembered the previously opened list:
jQuery(function($) {
// remember current list and make it visible
var $current = $('.collapsible_list:has(.activelink)').show();
$(".tab_box").on('click', function() {
var $previous = $current;
// open new list
$current = $('.collapsible_list', this)
.slideToggle("slow", function() {
// and slide out the previous
$previous.slideToggle('slow');
});
});
});
Demo
I have a toggle, and currently it works like this:
if .member-button is clicked it will add .active-sub to .member-button and remove it from .trainer-button. It will also display #member while hiding #trainer
.trainer-button works the same way adding .active-sub to .trainer-button while removing it from .member-button and it will display #trainer while hiding #member.
What I'm having trouble with is when the page first loads, how do I check if .active-sub is added to .member-button and if it is, to remove it from .trainer-button? (and vice versa)
I would also like to check if #member is not set to $("#member").hide(); then to automatically hide #trainer
Javascript:
<script type="text/javascript">
$(document).ready(function(){
//$("#member").hide();
$("#fitness-trainer").hide();
$('.member-button').addClass("active-sub");
$('.member-button').click(function () {
$("#fitness-trainer").fadeOut(function () {
$("#member").fadeIn();
});
$(".trainer-button").removeClass("active-sub");
$(this).addClass("active-sub");
});
$('.trainer-button').click(function () {
$("#member").fadeOut(function () {
$("#fitness-trainer").fadeIn();
});
$(".member-button").removeClass("active-sub");
$(this).addClass("active-sub");
});
});
</script>
HTML: Buttons
Member
Trainer
HTML: Content
<div id="member">
member content
</div>
<div id="trainer">
trainer content
</div>
if($('.member-button').hasClass('active-sub'))
{
$('.member-button').removeClass('active-sub');
$('.trainer-button').addClass('active-sub');
}
and vice-versa.
And:
if($('#member').is(':visible'))
{
$('#trainer').hide();
}
Just like the previous answer.
Try using,
Check whether the .member-button has the class .active-sub by doing the following,
$('.member-button').hasClass('active-sub');
this will return true if it has the class
you can check whether the #member is set to .hide() by,
if($("#member").is(":visible")){
// hide whatever you want here...
}else{
// display whatever you want here..
}
I'm pretty new to jquery so I'm proud of myself for what I've figured out so far. What I'm trying to do is show/hide a list of options depending on the approprate check box status. Eveything is working just fine but I can't figure out how to check to see if a check box is checked on load I know I should be able to use is.checked right now I have this javascript
$('.wpbook_hidden').css({
'display': 'none'
});
$(':checkbox').change(function() {
var option = 'wpbook_option_' + $(this).attr('id');
if ($('.' + option).css('display') == 'none') {
$('.' + option).fadeIn();
}
else {
$('.' + option).fadeOut();
}
});
Which fades in and out a class depending on the status of the checkbox. This is my html
<input type="checkbox" id="set_1" checked> click to show text1
<p class = "wpbook_hidden wpbook_option_set_1"> This is option one</p>
<p class = "wpbook_hidden wpbook_option_set_1"> This is another option one</p>
<input type="checkbox" id="set_2"> click to show text1
<p class = "wpbook_hidden wpbook_option_set_2"> This is option two</p>
The two problems I have are that the content with the .wpbook_hidden class is always hidden and if the checkbox is checked on load the content should load.
If someone could figure out how to check the status of the box on load that would be much appriciated feel free to play with this jfiddle http://jsfiddle.net/MH8e4/3/
you can use :checked as a selector. like this,
alert($(':checkbox:checked').attr('id'));
updated fiddle
or if you want to check the state of a particular checkbox, it would be something like this
alert($('#set_1')[0].checked);
updated fiddle
for the comment below, I have edited your code and now looks like this.
$('.wpbook_hidden').hide();
$(':checkbox').change(function() {
changeCheck(this);
});
$(':checkbox:checked').each(function(){ // on page load, get the checked checkbox.
changeCheck(this); // apply function same as what is in .change()
});
function changeCheck(x) {
var option = 'wpbook_option_' + $(x).attr('id');
if ($('.' + option).is(':visible')) { // I'm not sure about my if here.
$('.' + option).fadeOut(); // if necessary try exchanging the fadeOut() and fadeIn()
}
else {
$('.' + option).fadeIn();
}
}
#updated fiddle
to checkout if a checkbox is checked you can use the following code :
$(':checkbox').change(function() {
if ( $(this).checked == true ){
//your code here
}
});
Try this:
$("input[type=checkbox]:checked").each(fun....