Toggle and Slide Toggle

Click slideToggle and change color background Div

by cintia_rodrigues

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class=" order-list">
   <ul>
      <li class="price-slot">1200euros</li>
      <li id="box" class="shop-slot"><a><i class="fa fa-shopping-cart" aria-hidden="true"></i></a></li>
      <li class="info-slot color"><a href="#"><i class="fa fa-info" aria-hidden="true"></i></a></li>
   </ul>
   <div class="info-slot-text">
      <h4>Descripción</h4>
      <p>&nbsp;</p>
      <b>Calidad:</b>Superior
   </div>
</div>

CSS

.order-list {
    margin: 0;
}

    .order-list a {
        color: white;
    }


    .order-list ul li {
        display: inline-block;
        cursor: pointer;
    }

        .order-list ul li.price-slot {
            background-color: #009ce9;
            padding: 15px;
            color: white;
            font-weight: bold;
            font-size: 25px;
            width: 216px;
            box-sizing: padding-box;
        }

        .order-list ul li.shop-slot {
            color: white;
            font-size: 25px;
            background-color: #7dbb02;
            width: 60px;
            padding: 15px;
            text-align: center;
            box-sizing: padding-box;
        }

            .order-list ul li.shop-slot.seleted {
                background-color: red;
            }



        .order-list ul li.info-slot {
            background-color: #ffb901;
            width: 60px;
            padding: 15px;
            text-align: center;
            font-size: 25px;
            box-sizing: padding-box;
        }

        .info-slot:active{
            background-color:red;
        }

.info-slot-text {
    background-color: #666;
    padding: 25px;
}

.product-info .text-center {
    text-align: center;
}

h4, .h4 {
    font-size: 20px;
    line-height: 24px;
}



.changeBackground{
   background-color: #FF8F00 !important;
}

JavaScript

//Show indo description
$(".info-slot-text").hide();

$('.info-slot').click(function() {
   $(this).toggleClass("changeBackground");
   $(this).parent().next().slideToggle(200);
});