Bootstrap Button Group Show/Hide Div

Question

I've got a Bootstrap button group that has 2 buttons (JSON and XML) with JSON being active when the page is loaded. Pressing the XML button will automatically change focus to it.

Now, I'd like to attach some behavior to these buttons so that clicking the XML button hides the error-json pre element and shows the error-xml pre element.

Is there a Bootstrap-native way to accomplish this?

<div class="btn-group">
    <button class="btn btn-default" autofocus="true">JSON</button>
    <button class="btn btn-default">XML</button>
</div>

<pre id="error-json" class="hidden"><code class="language-json">{ 
  "ErrorCode": STATUS_CODE,
  "Description": ERROR_MSG
}</code></pre>

<pre id="error-xml"><code class="language-xml">&lt;error&gt;
  &lt;ErrorCode&gt;STATUS_CODE&lt;/ErrorCode&gt;
  &lt;Description&gt;ERROR_MSG&lt;/Description&gt;
&lt;/error&gt;
</code></pre>

score 2 · Accepted Answer · answered Mar 31 '17 at 19:20

$("#error-xml").hide();
$(".btn").click(function () {
 var id = $(this).attr("id");
  if(id == "json"){
  $(this).attr("autofocus",true).siblings().attr("autofocus",false);
   $("#error-xml").hide();
   $("#error-json").show();
  }else{
  $(this).attr("autofocus",true).siblings().attr("autofocus",false);
   $("#error-json").hide();
   $("#error-xml").show();
  }
});

:focus{
  outline: 1px solid blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="btn-group">
    <button class="btn btn-default" id="json" autofocus="autofocus">JSON</button>
    <button class="btn btn-default" id="xml">XML</button>
</div>

<pre id="error-json" class="hidden"><code class="language-json">{ 
  "ErrorCode": STATUS_CODE,
  "Description": ERROR_MSG
}</code></pre>

<pre id="error-xml"><code class="language-xml">&lt;error&gt;
  &lt;ErrorCode&gt;STATUS_CODE&lt;/ErrorCode&gt;
  &lt;Description&gt;ERROR_MSG&lt;/Description&gt;
&lt;/error&gt;
</code></pre>

score 0 · Answer 2 · edited May 23 '17 at 12:25

I think this can be accomplished with css dependencies. You can use the css selector #error-json + #error-xml { /*something here*/ }

Bootstrap has pre-builtin classes to show/hide elements. You find the classes in the documentation: http://getbootstrap.com/css/#helper-classes-show-hide

Maybe this thread helps out: On a CSS hover event, can I change another div's styling?

Why do you dont want to use javascript/jQuery to add the desired behaviour?

Regards

Bootstrap Button Group Show/Hide Div

2 Answers2