javascript - Bootstrap collapse section and expand another with one button -
javascript - Bootstrap collapse section and expand another with one button -
i have bunch of html fields logically separated such: half fields reside in: div id="general" , other half reside in: div id="advanced"
what i'm trying implement (and failing) following:
the fields in general div shown (by default). button caption "advanced" shown. , fields in advanced div hidden.
when button clicked, next should occur:
general section collapses hiding it's fields advanced section expands showing it's fields button caption changed "general".subsequent clicks toggles above.
e.g. upon next click, advanced section hidden, general section shown, , button caption changes "advanced"
notes: seems trivial beingness new web front-end, can't easily. if div section incorrect, scrap it. suspect i'm on right track, , need jquery code collapse , expand divs.
below attempts:
i used bootstrap collapse plugin accordian markup, isn't want. comes close though, each section has heading/button. i'd one heading/button toggle each section in opposite manner.
i used bootstrap collapse plugin without accordian markup, same result effort 1 - 2 button again.
i tried using jquery dynamically, can't logic (or syntax) correct.
i'm using bootstrap, happy go jquery (or javascript) solution if can't done solely in bootstrap collapse plugin.
check jsfiddle :- jsfiddle
$("#advanced").addclass('hide'); $(".button").click(function(){ $("#advanced").toggleclass('hide'); $("#general").toggleclass('hide'); if($(this).attr("value") == "advanced"){ $(this).attr("value","general"); } else if($(this).attr("value") == "general"){ $(this).attr("value","advanced"); } });
javascript jquery twitter-bootstrap twitter-bootstrap-3
Comments
Post a Comment