I have this code that shows initially how do I change it to be hidden initially?
$(document).ready(function() {
$('#hideshow').click(function() {
var anchor_value = $('#hideshow').text();
if (anchor_value == 'Hide') {
$('#hideshow').text('Show');
$('#message').hide();
}
if (anchor_value == 'Show') {
$('#hideshow').text('Hide');
$('#message').show();
}
});
});
I suggest you to reconsider your code by:
first of all, look at the basics of js/jQuery
check the visibility of the detail element or use a class instead of check the text of it
use the built in jQuery method toggle to toggle the visibility
to initially hide an element use css a set up accordingly the page
Code:
$(document).ready(function () {
$('#hideshow').click(function () {
if ($("#message").is(":visible")) {
$('#hideshow').text('Show');
} else $('#hideshow').text('Hide');
$('#message').toggle();
})
});
Demo: http://jsfiddle.net/IrvinDominin/CFExY/
Related
This question already has answers here:
Show/hide 'div' using JavaScript
(15 answers)
Closed 6 years ago.
I have a Checkbox in my index.html file as
#Html.CheckBoxFor(m=>m.isChecked, new { id = "isChecked" })
<div id='Shipping'>
<p> Some textboxes here </p>
</div>
I would like to hide the sipping div if the checkbox is checked and unhide if not checked. And i would like it to be dynamic. How do i do that?
I guess you'd first bind to the check box's change event:
$('#isChecked').change(function() {
//...
});
Within that event handler, you'd then show/hide the div based on the state of the check box. Possibly something like this:
if ($(this).is(':checked')) {
$('#Shipping').show();
} else {
$('#Shipping').hide();
}
Of course, you'll also want to set an initial value. A simple way to accomplish both would likely be to wrap the logic in a function:
var toggleDiv = function () {
if ($('#isChecked').is(':checked')) {
$('#Shipping').show();
} else {
$('#Shipping').hide();
}
}
Then call it from the event handler above:
$('#isChecked').change(toggleDiv);
And also when the page loads:
toggleDiv();
You just need to bind a change event to the checkbox and check it's :checked selector to determine if the div needs to shown or hidden.
<script>
$().ready(function(){
$('#isChecked').change(function()
{
$(this).is(":checked") ? $("#Shipping").show() : $("#Shipping").hide();
}).change(); // optional
});
</script>
javascript:
$('#isChecked').change(function(){
if($(this).is(":checked")) {
$(this).removeClass("hide");
} else {
$(this).addClass("hide");
}
});
css:
.hide{ display:none;}
HTML:
<div id='Shipping' class='hide'> </div>
$('#isChecked').change(function(){
if($(this).is(":checked")) {
$("#Shipping").hide()
} else {
$("#Shipping").show()
}
});
I'm creating a panel that slides down when the user focuses the search box.
I'm terrible at Jquery but still learning, I've managed to create the basic functionality:
$(document).ready(function() {
$(".search-panel").hide();
$("#search_form [type='text']")
.focus(function() {
$(".search-panel").slideDown("fast");
})
.focusout(function() {
$(".search-panel").slideUp("fast");
});
});
with this basic functionality clicking outside the text box will fold up the panel I'm trying to implement a complex set of conditions whereby:
IF (textbox.focus) { show search panel}
IF (texbox.losefocus) && ( NOT search-panel.mouseover)
&& ( NOT (anything-in-search-panel-is-focused) )
basically I need to make sure that the user is not hovering over or interacting with the panel in some way and that the textbox is not focused before I slide it up.
JsFiddle of current situation:
http://jsfiddle.net/b9g9d6gf/
Instead of using the .focusout() function, you should bind a click function on the document.
$(document).ready(function () {
$(".search-panel").hide();
$("#search_form [type='text']")
.focus(function () {
$(".search-panel").slideDown("fast");
});
$(document).click(function(e) {
if( !( $(e.target).is('#search_form *')) ){
$(".search-panel").slideUp("fast");
}
});
});
If the document is clicked, anywhere, it looks if the target isn't a element inside #search_form. If not, it will slide up the .search-panel.
Note:
I removed the label and changed the span to labels. Clicking a label will also (un)check the checkbox inside it. Having three checkboxes making it act wrong. So either make three separate labels (instead of span) or remove it.
Updated Fiddle
Try this Working Demo
<script>
$(document).mouseup(function (e)
{
var container = $("#search_form");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$(".search-panel").slideUp("fast");
}
else
{
$(".search-panel").slideDown("fast");
$("#search_form [type='text']").focus();
}
});
</script>
The Fiddle: http://jsfiddle.net/bscn3/
Scenario:
I want to use nested toggles inside tabbed containers, as in the fiddle.
My Issue:
When I click on Main Toggle ("Toggle 1") or ("Toggle 2"), the inner contents display.
But it closes if I click on anything inside. For Eg. If I click on Toggle 2, and if I click on Tab 1 -> Nested Toggle 1, Toggle 2 itself closes.
I want it to remain open.
My Guess:
The JQuery working closes the toggle if anything related to the Toggle (Even text content) is clicked.
My Need:
I want the Toggle to close only if those rectangular headers are clicked.
Also, if you can help clean up the code in such a way, that I don't need to write separate JS to make inner nested Toggles work independently of its parent or children toggles, it would great.
Currently I have two Toggle JS Functions written for the two toggles in example.
//TOGGLE
$('.toggle-view li').click(function () {
var text = $(this).children('.t');
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).children('.toggle').addClass('tactive');
} else {
text.slideUp('fast');
$(this).children('.toggle').removeClass('tactive');
}
});
//TOGGLE L2
$('.toggle-view2 li').click(function () {
var text2 = $(this).children('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).children('.toggle2').addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).children('.toggle2').removeClass('tactive2');
}
});
P.S. I haven't written the JS Code, I am using someone's template.
Thanks! :)
Seems like a pretty simple solution...
It's happening because the toggle currently activates whenever you click anythin inside of the li element (which includes the other toggle elements: .toggle2).
The solution therefore is to make it only activate the toggle when the .toggle/h6 element is clicked and change $(this).children(...) to $(this).siblings(...)
You can use the following as things are (same changes in TOGGLE and TOGGLE L2):
//TOGGLE
$('.toggle-view li .toggle').click(function () { // Changed selector
var text = $(this).siblings('.t'); // Changed to .siblings(...)
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).addClass('tactive'); // Removed .children(...)
} else {
text.slideUp('fast');
$(this).removeClass('tactive'); // Removed .children(...)
}
});
//TOGGLE L2
$('.toggle-view2 li .toggle2').click(function () {
var text2 = $(this).siblings('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).removeClass('tactive2');
}
});
OR
Just use the first section...
//TOGGLE
$('.toggle-view li .toggle').click(function () {
var text = $(this).siblings('.t');
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).addClass('tactive');
} else {
text.slideUp('fast');
$(this).removeClass('tactive');
}
});
and rename all of the .t2, .toggle2 etc. in your html to the same as the first one (i.e. .t2 becomes .t)
use event.stopPropagation()
i have updated jsfiddle
$('.toggle-view2 li').click(function (event) {
event.stopPropagation();
var text2 = $(this).children('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).children('.toggle2').addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).children('.toggle2').removeClass('tactive2');
}
});
I have simple Chrome extension that injects some html into a game webpage that lets a user customize the background image of the webpage. It stores the URL of the image with setlocalstorage so that when they return to the game the custom background image is still there. I've included some CSS that forces the image to fit the width of the browser window. This satisfies most users but, there are a few that have requested I allow them to turn off the width-matching feature. What I'd like to do is add a check box to allow the user to turn off the width adjustment.
I'm thinking some sort of "if the box is checked apply this class to the body tag" sort of thing but, I can't seem to figure it out.
If someone could show me how to accomplish this I'd really appreciate it!
Attach an onchange event listener to the checkbox that checks the value of 'checked' for your checkbox element and adds/removes the class:
yourCheckboxElement.addEventListener('change', function(e){
document.body.classList[this.checked ? "add" : "remove"]("someClass");
/* save value of this.checked to localStorage here */
});
jsFiddle example: http://jsfiddle.net/8RC2m/1/
Change css when checkbox is marked:
$("#new").click(function() {
if (this.checked){
$(this).closest('p').addClass('white');
} else {
$(this).closest('p').removeClass('white');
}
});
add styles:
.white {
color: white;
}
That might work for you, no?
Additionally,
$(":checkbox").attr("autocomplete", "on");
Wrap your width adjustment code in a css class like width-adjustment. Then try something like this:
if ($('#IdOfYourCheckBox').is(":checked") == true){
$("#ElementToChange").removeClass('width-adjustment');
}
You have requested JavaScript only so i will avoid jQuery, try something like this:
var b = document.getElementsByTagName("body")[0];
if (document.getElementById('checkbox-id').checked){
b.className +=" yourclass";
}
hope it helps
You can use this script to check if the chkbox is checked or not.
(function( $ ){
$.fn.check = function( handler ) {
if (handler) {
this.each(function() {
$(this).change(function() {
if ($(this).attr('checked')) {
handler.call(this);
$(this).closest('p').addClass('white');
}
});
});
} else {
this.each(function() {
$(this).attr('checked', true);
$(this).change();
$(this).closest('p').addClass('white');
});
}
};
$.fn.uncheck = function( handler ) {
if (handler) {
this.each(function() {
$(this).change(function() {
if (!$(this).attr('checked')) {
handler.call(this);
$(this).closest('p').removeClass('white');
}
});
});
} else {
this.each(function() {
$(this).attr('checked', false);
$(this).change();
$(this).closest('p').removeClass('white');
});
}
};
})( jQuery );
I have radios button on the page, when the page load, it will use length action to check and then hide/show some elements.
When user click on the radio, it will then hide and show some elements.
I'm wondering is this correct way doing it? Or how can it be improved?
$(document).ready(function() {
if ($(".delivery_type:radio").length > 0) {
if ($('#methodPickup').is(':checked')) {
$(".methodDelivery").hide();
$("#addressBookSelectBlock").hide();
$(".customAddress").hide();
}
if ($('#methodDelivery').is(':checked')) {
$(".methodPickup").hide();
}
}
$(".delivery_type:radio").live('click', function() {
if ($(this).val() == "pickup") {
$(".methodDelivery").hide();
$(".methodPickup").show();
$("#addressBookSelectBlock").hide();
$(".customAddress").hide();
}
if ($(this).val() == "delivery") {
if ($(".selectAddressList").length == 0) {
$(".customAddress").show();
}
$(".methodDelivery").show();
$(".methodPickup").hide();
$("#addressBookSelectBlock").show();
}
});
});
You could combine all the hide() and show() functions together:
if ($('#methodPickup').is(':checked')) {
$(".methodDelivery, #addressBookSelectBlock, .customAddress").hide();
}
// etc...
Also, I'm not sure why you are using live() unless the radio buttons are being dynamically added or removed; just use click() if they are not dynamic.
Sharing some HTML and a little more information might help with more suggestions.