Abbey Abbey - 4 months ago 132
jQuery Question

Make the Panel Heading on Bootstrap Collapse clickable

I am trying to fix this minor issue on my website. I am using the Bootstrap accordion for a part of my website. Currently the tabs only open when you click on the text over the panel-heading. I want to be able to click the panel-heading and have it open the hidden content rather than the text being the button to open the hidden content. I am unsure how to do it though. Does anyone know how?

http://codepen.io/aahmed2/pen/yOQvVz

Thanks in advance!

Here is the part I am trying to fix (I couldn't get it to look like code on here so please visit the link I provided to Codepen)



<div class="panel panel-default col-md-4">
<div class="panel-heading bites-stings" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
<a href="health-resources/ticks.html"><h4>Ticks</h4></a>
<a href="#"><h4>Bees and Wasps</h4></a>
<a href="#"><h4>Animal Bites</h4></a>
</div>
</div>
</div>


<div class="panel panel-default col-md-4">
<div class="panel-heading pet-health" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<a href="#"><h4>Pet Allergies</h4></a>
<a href="#"><h4>Toxic Plants</h4></a>
<a href="#"><h4>Pet and Wildlife Encounters</h4></a>
</div>
</div>
</div>


<div class="panel panel-default col-md-4">
<div class="panel-heading livestock-health" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<a href="#"><h4>This is a Topic</h4></a>
<a href="#"><h4>Topic 2</h4></a>
<a href="#"><h4>Another Topic</h4></a>
</div>
</div>
</div>










Zoonotic Diseases






Bacterial
Fungal
Parasitic
Prionotic
Rickettsial
Spirochetes
Viral








Allergies






Animal Allergies
Environmental Allergies








Environmental Health






This is a Topic
Topic 2
Another Topic





Answer

I modified the panels to be like this (and removed the a (anchor) tag as it is not needed)

(note: fix was applied to first panel only in the running code below)

<div class="panel-heading bites-stings" 
     data-toggle="collapse" data-parent="#accordion,#accordion2"
     href="#collapseOne" aria-expanded="false" 
     aria-controls="collapseOne" role="tab" id="headingSeven">           
          <h2>Bites and Stings</h2>            
</div>

It should work now.

Also added this to your CSS

div[role="tab"]:hover {
  cursor: pointer;
}

Running sample below (note: fix was applied to first panel only in the running code below)

div[role="tab"]:hover {
  cursor: pointer;
}

#accordion2 {
  margin-top: -20px;
}
.panel-heading:focus {
  outline: 0;
  border: none;
}
.panel-group {
  clear: both;
}
.panel-group .panel {
  border-width: 0;
  padding: 0 !important;
  border-radius: 0%;
}
.panel-group .panel-heading {
  height: 100px;
  text-align: center;
  color: #fff;
  padding-top: 2%;
  border: 1px solid #fff;
  border-radius: 0%;
  background-color: rgba(0, 0, 0, 0.5);
}
.panel-group .panel-heading h2 {
  color: #fff;
  text-shadow: 2px 2px 3px #000000;
  padding-top: 90px;
}
.panel-group .panel-heading a:active,
.panel-group .panel-heading a:visited,
.panel-group .panel-heading a:focus {
  text-decoration: none !important;
}
.panel-group .panel-collapse {
  background-color: #DDDDDD;
}
.panel-group .panel-body {
  padding-top: 20px;
  padding-bottom: 30px;
  text-align: center;
}
.panel-group > .panel {
  margin-top: 5px;
}
.panel-group .panel-heading {
  background-color: rgba(0, 0, 0, 1);
  border-radius: 0%;
  color: #fff;
  height: 350px;
  text-align: center;
}
.bites-stings {
  background: url(http://animals.sandiegozoo.org/sites/default/files/juicebox_slides/bee_honeycomb_03.jpg);
  background-size: cover;
}
.pet-health {
  background: url(http://petnetpull1.petnet.netdna-cdn.com/wp-content/uploads/2015/11/Pets-Dogs-Cats.jpg?c1906d);
  background-size: cover;
}
.livestock-health {
  background: url(https://aos.iacpublishinglabs.com/question/aq/700px-394px/what-is-a-group-of-cows-called_d87d5c1c-8102-4634-baea-c03e5bd8784f.jpg?domain=cx.aos.ask.com);
  background-size: cover;
}
.zoonotic {
  background: url(http://www.urdogs.com/wp-content/uploads/2015/08/talking-to-dog.jpg);
  background-size: cover;
}
.allergies {
  background: url(http://www.consostatic.com/wp-content/uploads/2009/03/allergie-au-pollen-symptomes-solutions-naturelles-plante-03.jpg);
  background-size: cover;
}
.environment-health {
  background: url(https://media-cdn.tripadvisor.com/media/photo-s/02/b5/36/97/lake-mcconaughy.jpg);
  background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="row">
  <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

    <div class="panel panel-default col-md-4">
      <div class="panel-heading  bites-stings" role="tab" id="headingSeven" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">

        <h2>Bites and Stings</h2>

      </div>
      <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          <a href="health-resources/mosquitoes.html"><h4>Mosquitoes</h4></a>
          <a href="health-resources/ticks.html"><h4>Ticks</h4></a>
          <a href="#"><h4>Bees and Wasps</h4></a>
          <a href="#"><h4>Animal Bites</h4></a>
        </div>
      </div>
    </div>


    <div class="panel panel-default col-md-4">
      <div class="panel-heading pet-health" role="tab" id="headingTwo">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          <h2>Pet Health and Safety</h2>
        </a>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
        <div class="panel-body">
          <a href="#"><h4>Pet Allergies</h4></a>
          <a href="#"><h4>Toxic Plants</h4></a>
          <a href="#"><h4>Pet and Wildlife Encounters</h4></a>
        </div>
      </div>
    </div>


    <div class="panel panel-default col-md-4">
      <div class="panel-heading livestock-health" role="tab" id="headingThree">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          <h2>Livestock Health and Safety</h2>
        </a>
      </div>
      <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
        <div class="panel-body">
          <a href="#"><h4>This is a Topic</h4></a>
          <a href="#"><h4>Topic 2</h4></a>
          <a href="#"><h4>Another Topic</h4></a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
    <div class="panel panel-default col-md-4">
      <div class="panel-heading zoonotic" role="tab" id="headingFour">
        <a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
          <h2>Zoonotic Diseases</h2>
        </a>
      </div>
      <div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
        <div class="panel-body">
          <a href="#"><h4>Bacterial</h4></a>
          <a href="#"><h4>Fungal</h4></a>
          <a href="#"><h4>Parasitic</h4></a>
          <a href="#"><h4>Prionotic</h4></a>
          <a href="#"><h4>Rickettsial</h4></a>
          <a href="#"><h4>Spirochetes</h4></a>
          <a href="#"><h4>Viral</h4></a>
        </div>
      </div>
    </div>


    <div class="panel panel-default col-md-4">
      <div class="panel-heading allergies" role="tab" id="headingFive">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
          <h2>Allergies</h2>
        </a>
      </div>
      <div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
        <div class="panel-body">
          <a href="#"><h4>Animal Allergies</h4></a>
          <a href="#"><h4>Environmental Allergies</h4></a>
        </div>
      </div>
    </div>


    <div class="panel panel-default col-md-4">
      <div class="panel-heading environment-health" role="tab" id="headingSix">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
          <h2>Environmental Health</h2>
        </a>
      </div>
      <div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
        <div class="panel-body">
          <a href="#"><h4>This is a Topic</h4></a>
          <a href="#"><h4>Topic 2</h4></a>
          <a href="#"><h4>Another Topic</h4></a>
        </div>
      </div>
    </div>
  </div>
</div>