javascript - Hiding/Showing Elements within Bootstrap Framework -

javascript - Hiding/Showing Elements within Bootstrap Framework -

using coda 2 on mac using html, css, js , bootstrap 3 (via cdn)

single webpage

series of links placing various form elements in sec column.

goal: on clicking specific links contained within bootstrap grid when specific link clicked, related content should shown while others hidden.

adapted code answered question @ fiddle @ ysmvn

now getting js post error. don't understand js, guess need alternative .siblings().hide()

my relevant code

<a href="" class="one">one</a> <a href="" class="two">two</a> <a href="" class="three">three</a> <a href="" class="four">four</a><br /><br /> <div class="container"> <div class="row"> <div class="col-md-3"> <div id="one">one</div> </div> <div class="col-md-3"> <div id="two">two</div> </div> <div class="col-md-3"> <div id="three">three</div> </div> <div class="col-md-3"> <div id="four">four</div><br/><br/> </div> </div>

and javascript is:

$(document).ready(function(){ // show chosen div, , hide others $("a").click(function (e) { e.preventdefault(); $("#" + $(this).attr("class")).show().siblings('div').hide(); }); });

for record, direct link fiddle mentioned this: http://jsfiddle.net/ysmvn/

not knowing aim do, wondering if have considered using bootstrap tabs or collapse components? now, seems going downwards road of re-inventing wheel.

http://getbootstrap.com/javascript/#tabs

http://getbootstrap.com/javascript/#collapse

here bit of alternate version of code posted, working sample. in sample, divs set display, can changed.

http://jsbin.com/decobeba/1/edit?html,css,output

javascript

$(document).ready(function(){ // show chosen div, , hide others $("#my-nav a").click(function (e) { e.preventdefault(); $('#my-nav a').removeclass('active'); $(this).addclass('active'); $('.my-section').hide(); var sectionactive = $(this).data('section'); $('#' + sectionactive).show(); }); });

html

<div id="my-nav"> <a href="#" data-section="one">one</a> <a href="#" data-section="two">two</a> <a href="#" data-section="three">three</a> <a href="#" data-section="four">four</a> </div> <div class="container"> <div class="row"> <div class="col-md-3"> <div id="one" class="my-section">one</div> </div> <div class="col-md-3"> <div id="two" class="my-section">two</div> </div> <div class="col-md-3"> <div id="three" class="my-section">three</div> </div> <div class="col-md-3"> <div id="four" class="my-section">four</div> </div> </div> </div>

javascript html css twitter-bootstrap twitter-bootstrap-3