i want to select a value from my dropdown, and then, when i click a button, it hides certain div and show another div. I'm baffled on how to achieved this. so i have two div.
<div id="div1"> some content </div>
<div id="div2"> some content </div>
#Html.DropDownListFor(model => model.Reference, ViewBag.ISharedUI as SelectList, "-- REFERENCE TYPE -- SHOW ALL", new { #id = "testID" })
and here is my button.
<input type="submit" value="Filter" name="Command" class="btn btn-default" onclick="abc()" />
and this is my function. I try to do it,
function abc() {
if ('#testID' != 1) {
$('#div1').show();
$('#div2').hide();
} else if (testID != 2) {
$('#div1').show();
$('#div2').hide();
} else {
$('#div1').hide();
$('#div2').hide();
}
}
I hope my question is clear.
I am unsure with what you want to do with the value from the dropdown input, but it is not too relevant to affecting the state of the divs if you are only interacting with the button to affect the divs.
In terms just hiding the div, you can apply a class "hidden" that hides the element or not with CSS.
Then you can toggle the div and whether or not it appears by clicking on the button with jQuery by adding and removing that hidden class with the toggleClass.
Let me know if you have any more questions.
$(document).ready(function() {
$(".btn").on("click", function() {
$("#div1").toggleClass("hidden");
$("#div2").toggleClass("hidden");
})
})
.hidden {
display: none;
}
<div id="div1"> some content </div>
<div id="div2" class="hidden"> some content </div>
<input type="submit" value="Filter" name="Command" class="btn btn-default" onclick="abc()" />
Related
as I mentioned above, I need to know if there is an option that can provide an execution of an "Url.Action" and a CSS animation at the same time?
<div style="zoom: 0.2">
<div class="container-fluid">
<div class="row">
<div id="ms-container">
<label for="ms-download">
<div class="ms-content">
<div class="ms-content-inside">
<input type="checkbox" id="ms-download"
onclick="location.href='#Url.Action("DownloadDirectory", "Home", new
{ #class = "btn btn-success}, null)';return false;" />
<div class="ms-line-down-container">
<div class="ms-line-down"></div>
</div>
<div class="ms-line-point"></div>
</div>
</div>
</label>
</div>
</div>
</div>
You can add a CSS animation to an element when the checkbox is checked using jQuery. Your HTML onClick will run, and the JS function will run alongside it, adding and removing the animation class to whatever element you want based on whether or not the checkbox is checked.
function doAnimation(){
//if the box is checked
if ($('#ms-download').prop('checked')){
//add the class with the animation
$('#whateverElement').addClass('class-with-animation')
//if unchecked, remove animation class
} else {
$('#whateverElement').removeClass('class-with-animation')
}
}
With Vanilla JavaScript:
function doAnimation(){
//if the box is checked
if (document.getElementById('ms-download').checked){
//add the class with the animation
document.querySelector('whateverElement').classList.add('class-with-animation')
//if unchecked, remove animation class
} else {
document.querySelector('whateverElement').classList.remove('class-with-animation')
}
}
How do i know if my element is visible or not using javascript. I'm using $('#element').hide();, $('#element').show(); to hidden or shown an element. How can i check if the element is shown? The element is in the modal. I tried to change the element which is not in the modal and it worked, but when i put the element inside the modal it's not working..
I tried using this code but it's not working.
<div class="well me">
<label for="majore">Major Exam</label>
<div class="input-group">
<input type="text" class="form-control majore" id="majore" oninput="total();"/>
<span class="input-group-addon">
<i class="fa fa-percent"></i>
</span>
</div>
</div>
<script>
if ($('.me').is(':visible')) {
mt = m / 100 * 50 + 50;
}
</script>
"none" == document.getElementById("element").style.display //Check for hide
"block" == document.getElementById("element").style.display //Check for show
you can use like also
if ($('#element').css('display') == 'none') {
alert('element is hidden');
}
Checks for display:[none|block], ignores visible:[true|false]
$('#element').is(":visible");
It seems your selector is wrong.
Example of $("[element]").is(":visible") below: (for refrence)
$("#show").on("click", function() {
$("#text").show();
})
$("#hide").on("click", function() {
$("#text").hide();
})
$("#getStatus").on("click", function() {
alert($("#text").is(":visible"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="text">Hello</div>
<button id="show">Show</button>
<button id="hide">Hide</button>
<button id="getStatus">Get Status</button>
$('.me') is a class selector which will return array of elements where elements have class me.
So you need to target the specific div either by using this or by using index as there can be many elements with same class name.
$('.me').is(':visible') this will check the first element and return result according to first element's visibility.
You can try
$(".me").eq(1).is(':visible') //Here 1 is index of div which can vary
OR
$(this).is(':visible')
I want to show the div class of .unhideme on a button press. This class is dynamically generated so there are multiple divs with the same class name. Using JQuery how do I show this block correctly?
<div id="negativeButtons">
<div class="unhideme" name="unhideme" style="display:none">
<h3>Comments</h3>
<textarea name="unhappymanager" id="unhappymanager"></textarea>
</div>
<input type="submit" class="excused" name="negativexcused" value="Excused">
<input type="button" class="unexcused" name="unexcused" value="Unexcused">
<input type="submit" class="commentpushDB" name="commentpushDB" style="display:none" value="Submit">
</div>
Here I have jquery which works for the other buttons but I can't seem to find a function that will show the div.
$(document).ready(function() {
$(".unexcused").click(function() {
$(this).closest(".unhideme").show();
$(this).closest(".unexcused").hide();
$(this).prev(".excused").hide();
$(this).next(".commentpushDB").show();
});
});
Instead you have to use .siblings() method:
$(".unexcused").click(function() {
$(this).siblings(".unhideme").show();
$(this).siblings(".unexcused").hide(); // <---- ?? why hide the buttons.
$(this).prev(".excused").hide();
$(this).next(".commentpushDB").show();
});
It's because the buttons and the div are siblings not parents.
I want click on the check box and hide the respective content.
Now in my code all the content with same class gets hidden when I click any one of the checkbox.
Since my front end tags are in apex I do not want to use id, attr, name,value. I want to use class and fix this issue, exactly in the way I have written in this fiddle.
Fiddle link for reference
$('input[type="checkbox"]').click(function() {
if ($(this).is(":checked")) {
$('.div1').hide();
} else {
$('.div1').show();
}
});
<h3 align="center"> This JavaScript shows how to hide divisions </h3>
<form>
<input type="checkbox">Exam1
<div class="div1">I am content1!
</div>
<br>
<input type="checkbox">Exam2
<div class="div1">I am content2!
</div>
<br>
<input type="checkbox">Exam3
<div class="div1">I am content3!
</div>
<br>
<input type="checkbox">Exam4
<div class="div1">I am content4!
</div>
<br>
</form>
https://jsfiddle.net/6ybp2tL6/
Is this possible??
Thanks in advance
Try this instead DEMO
$('input[type="checkbox"]').click(function() {
($(this).is(":checked")) ? $(this).next().hide() : $(this).next().show();
});
Try to hide all the divs with class div1 initially,
$(".div1").hide();
$('input[type="checkbox"]').click(function() {
$(this).next('.div1').toggle(!this.checked); //toggle(false) will hide the element
});
And toggle the visibility of the relevant div element with class div1 by using next() and toggle()
DEMO
I have a slew of buttons in different levels within a nested JQuery accordion. This is functioning kind of like a phone book, and when buttons are clicked, numbers are added to a communication tool.
I was hoping to put a button at the top of each sublevel in the accordion that would add all of the rest of the buttons within that sublevel to the "To:" field. I imagine there is an elegant way to do what I would otherwise be accomplishing by brute force in an ugly manner. Thanks!
<div id="accordion-nest">
<h3>First group</h3>
<div>
<button id="allGroupOne">Add all of Group One</button> <-----Button I want
<button id="Guy1">Biff 555-1111</button>
<button id="Guy2">Tagg 555-1112</button>
<button id="Guy3">Mitt 555-1113</button>
......
</div>
<h3>Second group</h3>
<div>
<button id="Guy13">Jeb 555-2222</button>
</div>
<h3>Third group</h3>
<div>
<button id="Guy33">Uncle Jesse 555-99999</button>
</div>
</div>
JS/JQuery
$('button').click(function () {
var last8 = (this.textContent).slice(-8);
if (pageNames == '') {
pageNames = (this.textContent).slice(0, -8);
} else {
pageNames = pageNames + " " + (this.textContent).slice(0, -8);
}
if ($('#pageTo').val() != '') {
$('#pageTo').val($('#pageTo').val()+', '+ areaCode + last8);
} else {
$('#pageTo').val(areaCode+last8);
}
}
I'd add the same class to all the 'Add All' buttons:
<button class="allGroup">Add all of Group One</button>
And would also add the same class to all the other phone buttons:
<button class="phone" id="Guy1">Biff 555-1111</button>
Also, add a class to the divs that contains each group, like this:
<div class="groupContainer">
Then, this would be the jquery when clicking an 'Add all' button:
$(".allGroupOne").click(function(){
var $parent = $(this).closest('.groupContainer'); //The parent div
$parent.find(".phone").trigger('click'); //This simulates each button click
});
That's it!
Cheers