Responsive Cards

Responsive Cards

by Keith Jeter

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="container nue d-n-h">
        <div id="maincontent" class="col-xs-12 content lg_nill">

<h1 class="doc">Lorem Ipsum</h1>

<div class="col-xs-12 nill">
    <div class="col-xs-12 nill mar_bott">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam tellus, porta vitae arcu ut, gravida tincidunt lorem. Nulla lacinia non nulla a ultricies. In at mi sed lacus vehicula convallis et sit amet metus.</p>
    </div>
</div>

<div class="row couter">

<div class="ful_cwrap">

<div class="col-xs-12 col-sm-2 cwrap doc mildmod" tabindex="1">
    <span class="colour"></span>
      <div class="card cwactive card-block">
        <div class="medal_wrap">
            <div class="medal lvl1">
            <!-- <span class="fa fa-heart"></span> -->
            </div>
        </div>

        <h4 class="card-title">Lorem Ipsum</h4>

<hr/>

<div class="col-xs-12 nill">
    <dl class="hpair">
      <dt>Cost: </dt>
      <dd>$25</dd>
    </dl>

    <dl class="hpair">
      <dt>Symptoms: </dt>
      <dd>Mild to Moderate</dd>
    </dl>

    <dl class="hpair">
      <dt>Avg. Time: </dt>
      <dd>1 hour</dd>
    </dl>
</div>

<div class="col-xs-12 nill">
    <p class="card-text">
        <span class="coll-1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam tellus, porta vitae arcu ut, gravida tincidunt lorem. Nulla lacinia non nulla a ultricies. In at mi sed lacus vehicula convallis et sit amet metus.
                    <br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam tellus, porta vitae arcu ut, gravida tincidunt lorem. Nulla lacinia non nulla a ultricies. In at mi sed lacus vehicula convallis et sit...

CSS

h1 {
  font-size: 2.286em;
  padding: 10px 12px 5px 0;
  margin-top: 20px;
  margin-bottom: 35px;
  border-bottom: dotted 1px #ddd;
} /* 32px */

h2 { 
  font-size: 1.714em;
  margin-top: 10px;
  padding-top: 0px; 
  border-bottom: dotted 1px #ddd;
  } /* 24px */

h3 { 
  font-size: 1.429em;
  margin-top: 10px;
  padding-top: 0px;
  } /* 20px */

h4 { 
  font-size: 1.143em;
  margin-top: 10px;
  padding-top: 0px;
  } /* 16px */

h5 { 
  font-size: 1em;
  margin-top: 10px;
  padding-top: 0px;
  font-weight: bold;
  } /* 14px */

h1.clm_detail { 
  padding-top: 0;
}

h1.mycoverage { 
  margin-top: 10px;
  margin-bottom: 0;
  margin-left: 0;
  padding-left: 0;
  padding-bottom: 10px;
  border: 0;
  /*padding: 0;*/
}

h1.doc { 
  margin-top: 10px;
  margin-bottom: 0;
  margin-left: 0;
  padding-left: 0;
  padding-bottom: 10px;
  border: 0;
  /*padding: 0;*/
}

.medal .fa { margin-top: 10px; margin-left: 10px; }

p { margin: 0 0 10px 0; }

table { 
  border-collapse: collapse;
  width: 100%;
}
th { background: #eee; padding: 8px; }
th, td { 
  border: 1px solid #dddddd;
  text-align: left;
  padding: 10px;
  vertical-align: top!important;
}

tr:nth-child(odd) { background: #f9f9f9; }

.form-horizontal .form-group {
  width: 100%;
  /*float: left;*/
  overflow: hidden;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 15px;
}
 
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  margin-left: -17px;
}

footer {
    background-color: #f2f2f2;
    border-top: solid 1px #d8d8d8;
    min-height: 100px;
    padding-top: 20px;
    padding-bottom: 10px;
}

/*-- Forms --*/

.form-control { font-size: 1em; margin-bottom: 5px; }
select.form-control:not([size]):not([multiple]) { height: 34px; /*margin-bottom: 15px;*/ }

.frm_lft { padding: 0 5px 0 0; }
.frm_rgt { padding: 0 0 0 5px; }

.modal fieldset { margin-bottom: 15px; }
.hint { margin-bottom: 5px; }

/*-- Forms --*/

.radio,...

JavaScript

//------------------------------------------------//

$(".cwrap").hover(function(){
    $(this).find('.medal, .colour').toggleClass("blubg");
    return false;
});

//------------------------------------------------//

$('[id^="coll-"]').click(function(e){
    e.preventDefault();

    if ($(window).width() < 768) {
    
        $("." + this.id).stop().slideToggle();
        //$(this).text("Show less");

      $(this).text(function(i, v){
        return v === 'Show less -' ? 'Show more +' : 'Show less -'
      })

    }
});

//------------------------------------------------//

$('.info_togg').find('p').html("<h4 class=\"card-title3\">Lorem<\/h4><br\/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam tellus, porta vitae arcu ut, gravida tincidunt lorem. Nulla lacinia non nulla a ultricies. In at mi sed lacus vehicula convallis et sit amet metus.");

//------------------------------------------------//

$('.cwrap').hover(function(e){
    e.preventDefault();
    if ($(window).width() > 768) {

        $('.card').removeClass("cwactive");

        return false;
    }
});

$('.cwrap.doc').hover(function(e){
    e.preventDefault();
    if ($(window).width() > 768) {

        $(this).find('.card').toggleClass("cwactive");

        $('.info_togg').show();
        $('.info_togg').find('.colour').css({'background': '#7bcaff'});
        $('.info_togg').find('p').html("<h4 class=\"card-title3\">Lorem111<\/h4><br\/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quam tellus, porta vitae arcu ut, gravida tincidunt lorem. Nulla lacinia non nulla a ultricies. In at mi sed lacus vehicula convallis et sit amet metus.");
        return false;
    }
});

//------------------------------------------------//

$('.cwrap.nurse').hover(function(e){
    e.preventDefault();
    if ($(window).width() > 768) {

        $(this).find('.card').toggleClass("cwactive");

        $('.info_togg').show();
        $('.info_togg').find('.colour').css({'background':...