javascript - Bootstrap ignore style modifications -


i'm developing simple webpage using twitter bootstrap.

at sidebar have 3 buttons. each of buttons calls function show 1 div , hide others.

the html code 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 1 of js functions hide/show divs:

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

i update code @chaoticnadirs answer still not work. here code @ bootply

the problem function works once finish divs became hidden again (as default).

i feel problem in transition due twitter bootstrap framework.

does how solve this?

bootstrap provides .hidden class. can use rather display style hide , show elements.

check bootply 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 new example firing event on <div> click inside <a> tag. can prevent 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 new bootply: http://www.bootply.com/3rkabpx6d0


Comments

Post a Comment

Popular posts from this blog

Python Kivy ListView: How to delete selected ListItemButton? -

Image
i'm trying learn kivy building simple todo-list app suggested dusty phillips, author of book "creating apps in kivy". this code far: from kivy.app import app kivy.uix.boxlayout import boxlayout kivy.properties import objectproperty kivy.uix.listview import listitembutton class taskbutton(listitembutton): pass class todoroot(boxlayout): task_input = objectproperty() task_list = objectproperty() def add_task(self): self.task_list.adapter.data.extend([self.task_input.text]) self.task_list._trigger_reset_populate() def del_task(self): pass class todoapp(app): def build(self): return todoroot() if __name__ == '__main__': todoapp().run() and kv file: #: import main todo #: import listadapter kivy.adapters.listadapter.listadapter #: import listitembutton kivy.uix.listview.listitembutton todoroot: <todoroot>: orientation: "vertical" task_input: task_input_view t...
Read more

ruby - How do I merge two hashes into a hash of arrays? -

http://codepad.org/wmyzqlis i'd merge these 2 arrays: a = { :a => 'a', :b => 'b', :d => 'd' } b = { :a => '1', :b => 'b', :c => 'c' } into hash looks this: {:a => ["a", "1"], :b => ["b", "b"], :c => [nil, "c"], :d => ["d", nil] } this doesn't work: p a.merge(b) { |k, v1, v2| [v1, v2] } # {:c=>"c", :a=>["a", "1"], :b=>["b", "b"], :d=>"d"} it's because hash#merge call block duplicate keys. a = { :a => 'a', :b => 'b', :d => 'd' } b = { :a => '1', :b => 'b', :c => 'c' } hash[(a.keys|b.keys).map { |key| [key, [a.fetch(key, nil), b.fetch(key, nil)]] }] # => {:a=>["a", "1"], :b=>["b", "b"], :d=>["d", nil], :c=>...
Read more