Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap Basics Building Forms With Bootstrap Add Custom CSS to Your Bootstrap Site

Thomas Barkel
PLUS
Thomas Barkel
Courses Plus Student 7,222 Points
Posted by Thomas Barkel
Thomas Barkel
Courses Plus Student 7,222 Points

Collapsible component

Tinkering with collapsible items within the Cards of this course example and am running into issues when trying to accomplish the following:

  1. Having multiple radio buttons wherein one radio button queues the collapse dropdown and the other does not. And where user cannot select both radio buttons simultaneously

  2. Inputting a different radio button style then the default design that I seem to keep getting.

Default code provided by GetBootstrap.com for the radio style that I'm trying to code 

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

My current code

<!--    speakers    -->
        <h1 id="speakers" class="display-4 text-center my-5 text-muted">Speakers</h1>
<div class="row">
  <div class="col-md-6 col-lg-4">
        <div class="card mb-3">
      <img class="card-img-top" src="img/vivianne.png" alt="Vivianne">
      <div class="card-body">
        <h6 class="card-title">Red or Blue?</h6>

        <p>
  <a class="form-check" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  </a>       
  <input class="form-check-inline" type="radio" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> <label class="form-check-label">
Red
  </label>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-block">
<form>
  <div class="form-group pl-2 pt-2 pr-2">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
  </div>
  <div class="form-group pl-2 pt-2 pr-5">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
  </div>
</div>

        <p>
  <a class="form-check" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
  </a>       
  <input class="form-check-inline" type="radio" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> <label class="form-check-label">
Blue
  </label>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-block">
<form>
  <div class="form-group pl-2 pt-2 pr-2">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
  </div>
  <div class="form-group pl-2 pt-2 pr-5">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
  </div>
</div>        


  </div>
</div>
  </div>

2 Answers

Steven Parker
Steven Parker
229,644 Points
Steven Parker
Steven Parker
229,644 Points

I notice you have more than one element with the same ID, particularly "collapseExample". Every ID on the page must be unique, and duplicated IDs may interfere with intended functionality. Check the entire page carefully to make sure this is observed.

For radio buttons to function as a group and prevent simultaneous selection, they must all have a "name" attribute set to the same value.

I'm not sure what style you want to apply, but typical Bootstrap styles for radio buttons involve placing the buttons inside the label elements, and then grouping all of them together in button group with appropriate classes applied to the labels and group.

Thomas Barkel
PLUS
Thomas Barkel
Courses Plus Student 7,222 Points
Thomas Barkel
Thomas Barkel
Courses Plus Student 7,222 Points

Thanks for that insight Steven, one more question, I'm attempting to make the collapsible elements to auto-collapse all other elements that are not selected via using data-parent, but it's not seeming to work.

The source i'm using is at this link and under the 'Accordian' section. https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

Here's my current code

        <div id="viviancollapse">
  <a class="form-check" data-toggle="collapse" href="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1">
  </a>       
           </div>
  <input class="form-check-inline" data-parent="#viviancollapse" name="collapse" type="radio" data-toggle="collapse" data-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample1"> <label class="form-check-label">
        <p>
            Red
          </p>
  </label>

<div class="collapse" id="collapseExample1">
  <div class="card card-block">
<form>
  <div class="form-group pl-2 pt-2 pr-2">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
  </div>
  <div class="form-group pl-2 pt-2 pr-5">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
  </div>
</div>


  <a class="form-check"  data-toggle="collapse" href="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2">
  </a>       
  <input class="form-check-inline" data-parent="#viviancollapse" name="collapse" type="radio" data-toggle="collapse" data-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample2"> <label class="form-check-label">
        <p>
            Blue
          </p>
  </label>

<div class="collapse" id="collapseExample2">
  <div class="card card-block">
<form>
  <div class="form-group pl-2 pt-2 pr-2">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
  </div>
  <div class="form-group pl-2 pt-2 pr-5">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>
  </div>
</div>        


  </div>
</div>
  </div>