CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Limon
Limon

Reputation: 1793

hide and show buttons not working

I have this code for uploading an image: (it's from a template that uses bootstrap 2)

 <div class="span6">
   <div class="control-group">
     <label class="control-label">Imagen</label>
       <div class="controls">
         <div class="fileupload fileupload-new" data-provides="fileupload">
           <div class="fileupload-new thumbnail hide" id="upload" style="width: 200px; height: 150px;">
             <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="Beneficio"/>
           </div>
           <div class="hide fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;" id="preview"></div>
             <div id="imagen">
               <span class="btn btn-file">
                 <span class="fileupload-new hide" id="select_button">Seleccione</span>
                 <span class="fileupload-exists hide" id="change_button">Cambiar</span>
                 <input type="file" class="default" name="file"/>
               </span>
               <a href="#" class="btn fileupload-exists hide" data-dismiss="fileupload" id="removebutton">Remover</a>
             </div>
           </div>
         </div>
       </div>
     </div>

I'm using "hide" on some elements because I need to hide those buttons in case javascript on client browser is not active, because it looks all messy and buttons change_button and remove_button should only appear after uploading the image. And select_button in that case should be hidden again.

So when comes to do the js code, I did this:

$('#upload').show('hide');
$('#select_button').removeClass('hide');
$('#preview').show();

$('#select_button').click(function(){
  $('#select_button').addClass('hide');
  $('#change_button').show();
  $('#remove_button').show();
});

select_button is being hide ok, but change_button and remove_button does not appear after I use the show function.

When inspecting the code, no errors appears. So what I am doing wrong? why those buttons does not appear?

Upvotes: 0

Views: 69

Answers (3)

T J
T J

Reputation: 43156

The bootstrap hide class contains display:none !important which overrides the inline display value added by the script.

For displaying the element, remove the class hide using removeClass() method as follows:

$('#upload').removeClass('hide');
$('#select_button').removeClass('hide');
$('#preview').removeClass('hide');
$('#select_button').click(function(){
  $('#select_button').addClass('hide');
  $('#change_button').removeClass('hide');
  $('#remove_button').removeClass('hide');
});

Update:

Other than that, you are using the wrong selectors, in HTML you've id removebutton, and in script you're using #remove_button. Make sure all of your selectos are correct.

Upvotes: 2

starvator
starvator

Reputation: 1017

jquery does not use .show('hide') read about it here. Instead use .show() and .hide()

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

.show('hide') is not valid reference

use .hide() instead reference

Upvotes: 0

Related Questions