jQuery - Hide & Show Element REVERSE [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I got this code off the internet and I'd Like it reversed so the Element is hidden and a button is pressed to show it.
jQuery:
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#hide').toggle('show');
});
});
HTML:
<input onclick="change()" id='hideshow' type="button" value="Hide">
<div id='hide>
*content here*
So basically i'd like it reversed if possible. So the Element (div) is hidden, and the button (input) is clicked to show it.

You can do this with jQuery:
jQuery(document).ready(function(){
var $divHide = jQuery('#hide');
$divHide.hide();
jQuery('#hideshow').live('click', function(event) {
$divHide.toggle();
});
});
But I'd recommend you do it with CSS (with your jQuery in tact as it is now):
#hide
{
display: none;
}
I recommend this approach because Javascript executed on DOM ready can sometimes be visible to the user. Meaning your #hide div will be visible initially (if only for a split second).
Also (as an aside), I'd rethink the naming convention a bit. I wouldn't call a div 'hide', especially when, on occasions, you'll want it to show.

.live() was deprecated, you should use .on() instead, and also use .toggle():
jQuery(document).ready(function(){
jQuery('body').on('click','#hideshow', function(event) {
jQuery('#hide').toggle();
});
});

HTML:
<input onclick="change()" id='hideshow' type="button" value="Hide">
<div id='hide' style="display:none;">
^ check for this apostrophy
JS:
jQuery(document).ready(function(){
jQuery('#hideshow').on('click', function(event) {
jQuery('#hide').show();
});
});
.live doesn't get used anymore and got removed from the jquery api on version 1.9. So to ensure compatibility with newer versions you should use the on method instead (http://api.jquery.com/on/)
If you want to toggle the element, keep using
jQuery('#hide').toggle("show");
.show(); will only show and not hide it

try
jQuery(document).ready(function(){
jQuery('#hide').hide();
jQuery('#hideshow').live('click', function(event) {
jQuery('#hide').toggle('show');
});
});
DEMO

Jquery (replace live by on):
jQuery(document).ready(function(){
jQuery('#hideshow').on('click', function(event) {
jQuery('#hide').toggle();
});
});
HTML (add a single quote at the end of id='hide' and the closing tag </div>):
<input onclick="change()" id='hideshow' type="button" value="Hide">
<div id='hide'>
*content here*
</div>
CSS (add this css rule):
#hide {
display: none;
}

You need to trigger $("#hide").show(); on clicking on button element.
HTML Code
<input id='hideshow' type="button" value="Hide">
<div id='hide' style="display: none;">
LoremIpsum
</div>
jQuery Code
$("#hideshow").click(function(){
$("#hide").show();
});

Related

Switch between divs using radio buttons

I am trying to show-hide div using jquery on click of radio buttons. It might be a weird question to ask but my brain is not digging more and i know that is easy task to do.
Below is HTML
<input type="radio" value="Active Now" class="tabActive" id="active-radio1"
/>Participations
<input type="radio" value="Not Active Now" class="tabNotActive"
id="active-radio2" />
Droppers
<div id="tabActive" class="tab-content">
</div>
<div id="tabNotActive" class="tab-content hide">
</div>
Below is JS
$("input:radio").off().on('click',function()){
var value = $(this).attr("class");
$("#"+value).show();
// I also tried
$("#"+value).toggleClass('hide'); /*Not right way, i know :)*/
$("#"+value+" .tab-content").toggleClass('hide')
});
I am not able to switch between divs due to hide class, but nothing worked
Note: The hide class is being added by framework and i can not modify it.
So, i need a perfect way to show hide these divs.
Try this.
$('input[type=radio]').on('click',function()) {
var id = $(this).attr('class'); // this is very prone to problems
$('.tab-content').addClass('hide')
$('#' + id).removeClass('hide');
});
You can try this one:
$(function() {
$("[name=toggler]").click(function(){
$('.toHide').hide();
$("#blk-"+$(this).val()).show('slow');
});
});
DEMO FIDDLE

Show/Hide div with button

I have a a HTML page with a button which shoes hidden content when pressed. I am using jquery code which I have bundled into my HTML page. When I press the button to show the content in the hidden div it works find, however when I press the button again to hide the content nothing happens. If anyone could help me that would be great. Also how would I be able to target multiple buttons. Would I just paste the same jquery code and label it '2' and then '3' and so on for example? Any working examples would be great. Here is my code:
HTML:
<head>
<script>
$(document).ready(function() {
$("#spoiler1").hide();
$("#button1").click(function() {
$("#spoiler1").show(300);
});
});
</script>
</head>
<button id="button1">Adventurer ▼</button>
<div id="spoiler1" style="display:none">
<p>1. Climb a tree<input type="checkbox" /></p>
<p>2. Roll down a really big hill<input type="checkbox" ></p>
<p>3. Camp out in the wild<input type="checkbox" ></p>
<p>4. Build a den<input type="checkbox" ></p>
<p>5. Skim a stone<input type="checkbox" ></p>
</div>
Thanks in advance for any help or advice.
Use .toggle() instead
$(document).ready(function () {
$("#spoiler1").hide();
$("#button1").click(function () {
$("#spoiler1").toggle('slow');
});
});
Demo
Update
And the idea about having mutiple buttons, I've come up with the approach that you should try, use classes instead of IDs for the buttons and provide the same ID to divs that you want to toggle. This might take some design issues but you can manage and this is just a basic guideline to move forward.
As Markup is too long for mutiple divs so i'm posting only.
JQuery
$(document).ready(function () {
$(".category").click(function () {
$(".show").hide();
var divToShow = $(this).text().split(" ")[0];
$("#" + divToShow).toggle('slow');
});
});
Updated Fiddle
$(document).ready(function(){
$("#spoiler1").hide();
$("#button1").click(function(){
if($("#spoiler1").is(':visible')){
$("#spoiler1").slideUp(300);
}
else
{
$("#spoiler1").slideDown(300);
}
});
});
Demo:
http://jsfiddle.net/YvUDV/
Use toggle instead:
$('#button1').bind("click",function(){
$("#spoiler1").toggle("fast");
});
As for multiple button event. Assign a class name to the button so you can select by class.
$('button.toggle-div').click(function(){...});
As for visibility toggle, there are a number of ways.
Use toggle() in jQuery. (the most obvious choice, but in practice we could also..)
Use toggleClass() link to
add/remove a class which has a display:none css rule. (more flexible, you can toggle other css styles like the font color, background, etc.)
Use some
two-way binding JavaScript libraries like knockoutjs or angular.
(Probably an overkill for a small application. But it will
definitely reduce the amount of coding if it is a large scale.)

why doesnt this onclick jquery work? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
I have this HTML
<input type="text" id="one" />
<input type="text" id="two" />
<button type="button" id="onebtn" >hide</button>
and js as
$('#onebtn').on('click',function(){
$('#one').fadeOut('slow',function(){
$('#two').fadeIn('slow');
});
});
but this doesn't seem to work but, if I use <input type="button" /> it works, but I want to use <button ></button>
fiddle http://jsfiddle.net/Fzg7b/
It is because, you are not loading jQuery in your fiddle.
Load the jQuery version from the top left side. Then it would work!
http://jsfiddle.net/afzaal_ahmad_zeeshan/Fzg7b/5/
Try it here! It is working.
And for information as C Fairweather has mentioned to use
$(function(){
/* A shortcut for dom ready */
});
No jQuery code would work if there is no DOM ready function what we see as
$(document).ready(fucntion () {
/* functions here.. */
})
But jsfiddle doesn't need this! So it is not required! But a good point to come up with. :)
did you try to use .click()?
$('#onebtn').click(function(){
$('#one').fadeOut('slow',function(){
$('#two').fadeIn('slow');
});
});
It may help, but I had no time to test this.
also, you are displaying both the textbox1 and textbox2 elements. Then saying fade the first out and fade the second in but the second textbox is already visible. You cannot fade in an already visible item. Set the second textbox to hidden.
<input type="text" id="two" style="display: none;" />
Once this is done, your code functions as expected. Also, in your jsfiddle...remember to select the jquery version you are using. Currently you load nothing.

jQuery on not working for dynamically added elements [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 9 years ago.
I want to use .on on dynamically created elements... Although its not working, and yes I am using a selector :)
$(".metadata").on("click", "i.icon-remove", function () {
console.log("what");
$(this).parent(".metadata").slideUp(function () { $(this).remove(); });
});
This works perfectly for existing content, but not for anything thats dynamically created. Both initial and dynamic content use the exact same creation method so I know their signatures are the same, any ideas?
Here is my HTML as it stands, the first item is present in the HTML, the second is dynamically created
<div class="metadata">
<input type="text" value="" style="width: 200px;">
<i class="icon-remove"></i>
</div>
<div class="metadata" style="">
<input type="text" maxlength="100" style="width: 200px;">
<i class="icon-remove"></i>
</div>
Try this
$(document).on("click", ".metadata i.icon-remove", function () {
console.log("what");
$(this).parent(".metadata").slideUp(function () { $(this).remove(); });
});
As an addendum to Pranav's answer, avoid if at all possible doing delegated events off of $(document) - that results in all events that happen anywhere in the page being inspected for matches to your selector.
Far better would be to use a more targeted selection that exists on the page from the start. Something like
$('#otherDivThatsThere').on("click", "i.icon-remove", function () {
console.log("what");
$(this).parent(".metadata").slideUp(function () { $(this).remove(); });
});
Where, again, #otherDivThatsThere is already in your dom at the moment that line of code is run.

I'm having some trouble trying to get my script to change a element

I have a built a small form on a Drupal site with the following code:
<form id="form">
<button class="btn calc" id="calculator" onclick="return false">Submit</button>
<div class="calcAnswer">£ <span id="result">no value</span></div>
</form>
I would like to use JavaScript to automatically replace the #result element with a value once the button is clicked.
I'm trying this code (but can't seem to get it working:
jQuery(document).ready(function ($){
$("#calculator").click(function () {
$("#result").replaceWith('<span id="result">A new value</span>');
});
});
I have been testing in a JSFiddle (http://jsfiddle.net/NFQpw/8/) but am getting nowhere.
Actually, the problem with your fiddle is that you have "No-Library (pure JS)" specified. You need to include jQuery, and your script will work as expected (on the left bar, under "Frameworks & Extensions", select a version of jQuery). There's nothing wrong with your jQuery.
That said, I agree with #Stijn Martens, using .html('A new value') is cleaner; there's no reason to use .replaceWith in this instance.
You can see it working here: http://jsfiddle.net/Jammerwoch/NFQpw/12/
You just need to set the html inside the #result span. Using the .html() function.
jQuery(document).ready(function ($){
$("#calculator").click(function () {
$("#result").html('A new value');
});
});
http://jsfiddle.net/Stijntjhe/NFQpw/10/
try this one. just include JS: link
jQuery(document).ready(function ($){
$("#calculator").click(function () {
$("#result").replaceWith('<span id="result">A new value</span>');
});
});
It's working, but you're testing with pure Javascript, not jQuery
set on Frameworks & Extensions in the left menu the option jQuery 1.10.1
and it will work

Categories

Resources