Radio Button not working with data-toggle while using bootstrap accordion

I want to select radio button options and also want to use the bootstrap accordion but when the data-toggle is used then the radio button options are not selected. How can I use that for the purpose?

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<div id='accordion1' class='panel-group'>
        <div class='panel' style="border: none !important; -webkit-box-shadow:none !important;">
            <input type='radio' id='r11' name='occupation' value='Working' required>
            <label data-toggle='collapse' data-parent='#accordion1' href='#collapse3' class='button1 header' for='r11' style='width: 350px;'>Working</label>
            <div id='collapse3' class='collapse'>
                <div class='panel-body'>
                    <div class='form-group'>
                        <label class='col-md-4 control-label' for='textinput'></label>  
                        <div class='col-md-4'>
                            <input id='textinput' name='profession' type='text' placeholder='Profession' class='form-control input-md'>
                            <span class='help-block'>e.g. Business Owner, Chef, Sales Person</span>  
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class='panel' style="border: none !important; -webkit-box-shadow:none !important;">
            <input type='radio' id='r21' name='occupation' value='Non-Working'>
            <label data-toggle='collapse' data-parent='#accordion1' href='#collapse4' class='button1 header1' for='r21' style='width: 350px'>Not Working</label>
            <div id='collapse4' class='collapse'>
                <div class='panel-body'>
                    <div class='form-group'>
                        <label class='col-md-4 control-label' for='selectbasic'></label>
                        <div class='col-md-4'>
                            <select id='selectbasic' name='profession' class='form-control'>
                                <option value='' selected='selected' disabled>Select</option>
                                <option value='Student'>Student</option>
                                <option value='Stay at home'>Stay at home</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer

HTML Code Snippet

<form class="bs-example" action="">
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
            <label for='r11' style='width: 350px;'>
              <input type='radio' id='r11' name='occupation' value='Working' required /> Working
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"></a>
            </label>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class=panel-title>
            <label for='r12' style='width: 350px;'>
              <input type='radio' id='r12' name='occupation' value='Not-Working' required /> Not Working
              <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"></a>
            </label>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
          <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
        </div>
      </div>
    </div>
  </div>
</form>

JS Code Snippet

$('#r11').on('click', function(){
$(this).parent().find('a').trigger('click')
})

$('#r12').on('click', function(){
  $(this).parent().find('a').trigger('click')
})

What I have done is – used JQuery to trigger the event of anchor tags when the radio button is clicked, as both of them has their own default click events, thus anchor cannot take radio buttons as child. So, to make things work, I used them as sibling elements, and trigger the anchor’s click event when radio button is pressed

Hope this is what you were expecting for!! Thanks

Please Check this Codepen Snippet, for further reference.

Advertisement

Answer