CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
kike
kike

Reputation: 4463

Bootstrap ignore style modifications

I'm developing a simple webpage using Twitter Bootstrap.

At the sidebar I have 3 buttons. Each of this buttons calls a function to show one div and hide the others.

The HTML code is something like:

<div>
   <div class="row" id="general" style="display:none">
   Text1
   </div>
   <div class="row" id="medication" style="display:none">
   Text2
   </div>
   <div class="row" id="diet" style="display:none">
   Text3
   </div>
</div>

And this is one of JS functions that hide/show the DIVs:

 function showGeneral(){
        document.getElementById('general').style.display = 'block';
        document.getElementById('medication').style.display = 'none';
        document.getElementById('diet').style.display = 'none';
      }

I update the code with @ChaoticNadirs answer but still does not work. Here is my code at Bootply

The problem is that the function works properly but once it finish all DIVs became hidden again (as default).

I feel the problem could be in any transition due to Twitter Bootstrap framework.

Does anyone how to solve this?

Upvotes: 2

Views: 699

Answers (2)

ChaoticNadirs
ChaoticNadirs

Reputation: 2290

Bootstrap provides a .hidden class. You can use this rather than the display style to hide and show elements.

Check this bootply for an example: http://www.bootply.com/uY7kHe3Nw7

HTML:

<button class="btn btn-default" id="show-general">Show General</button>

<div>
   <div class="row hidden" id="general">
     Text1
   </div>
   <div class="row" id="medication">
     Text2
   </div>
   <div class="row" id="diet">
     Text3
   </div>
</div>

JS:

$("#show-general").on('click', showGeneral);

function showGeneral(){
        $('#general').removeClass('hidden');
        $('#medication').addClass('hidden');
        $('#diet').addClass('hidden');
      }

EDIT:

In your new example you are firing the event on a <div> click inside an <a> tag. You can do something like this to prevent the default action:

JS:

$('#showGeneral').on('click', showGeneral);

function showGeneral(e){
    e.preventDefault();
    $('#general').removeClass('hidden');
    $('#medication').addClass('hidden');
    $('#diet').addClass('hidden');
    $('#workout').addClass('hidden');
}

Here's a new bootply: http://www.bootply.com/3RkAbPX6d0

Upvotes: 4

poopoothegorilla
poopoothegorilla

Reputation: 784

You might want to try using the "visibility" attribute... https://developer.mozilla.org/en-US/docs/Web/CSS/visibility you can read more about it here.

Usually I apply a class to an element I would like to hide. This way it prevents using inline styles. If you don't care about inline styling you could also use jQuery's show(),hide(), or toogle() methods.

I do not think that the issue is with Bootstrap.

Upvotes: 0

Related Questions