Cacher is the code snippet organizer for pro developers

/************************************************************************************
************************************************************************************/
/* HOME ICONE */
.home-icone {
    text-align: center;
}
.home-icone i {
    font-size: 70px;
    padding-right: 70px;
    padding-left: 29px;
    border-right: 1px solid #ccc;
    line-height: 1;
    cursor: pointer;
    vertical-align: top;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.home-icone i:hover,
.home-icone i.active {
    color: #ed1c24;
}
.home-icone i.last {
    border-right: none;
}
.home-icone__infobox > div {
    display: none;
    padding-top: 120px;
    padding-bottom: 70px;
    position: relative;
}
.home-icone__infobox i {
    display: none;
    padding: 0;
    border-right: none;
    cursor: default;
    position: absolute;
    color: #eee;
    top: 40px;
    font-size: 70px;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
.home-icone__title {
    position: relative;
}
.home-icone__title small {
    display: block;
    margin-top: 20px;
    margin-bottom: 40px;
    font-weight: 400;
    font-style: italic;
    font-size: 12px;
}

.home-icone__title::before {
   width: 100%;
   text-align: center;
   content: "-";
   position: absolute;
   left: 0;
   top: -35px;
   font-weight: 700;
}

@media only screen and (max-width: 480px) {
    .home-icone i {
        font-size: 30px;
        padding-right: 21px;
        padding-left: 20px;
    }
    .home-icone__infobox > div {
        padding-top: 70px;
        padding-bottom: 30px;
    }
}
/* FINE BLOCCO ICONE */
/************************************************************************************
************************************************************************************/

//***********************************************************************************
//***********************************************************************************
// ICON BOX

//aggiungo id incrementale alle icone
//otterrò #icon0, #icon1 ecc...
$( "#home-icone i" ).each(function( index ) {
   $(this).attr('id', 'icon' + index);
});

//aggiungo id incrementale ai box con le info per ciascuna icona
//otterrò #icon0_target, #icon1_target ecc...
$( "#home-icone .home-icone__infobox > div" ).each(function( index ) {
   $(this).attr('id', 'icon' + index + '_target');

   //aggiungo in ciascun box icona freccia
   $(this).append('<i class="icon-down-open-big"></i>')
});

//setup prima icona e primo box
// aggiungo classe active alla prima icona
$("#home-icone #icon0").addClass('active');
$("#home-icone #icon0_target").show();
$("#home-icone #icon0_target i").delay(1000).show();

//su evento click di ciascuna icona
$( "#home-icone i" ).click(function() {

   //rimuovo precedente classe active su altre icone
   $( "#home-icone i").removeClass('active');

   //aggiungo classe active su quella cliccata
   $(this).addClass('active');

   //recupero id icona selezionata e costruisco id box corrispondente
   var idRef = $(this).attr('id');
   var idTarget = idRef + '_target';

   //nascondo freccia box attuale
   $("#home-icone .home-icone__infobox > div:not(#" + idTarget + ") i").hide();

   //chiudo box precedente
   $( "#home-icone .home-icone__infobox > div:not(#" + idTarget + "):visible").slideUp(function() {
      //quando eseguita chiusura apro quello selezionato
      $( "#home-icone .home-icone__infobox > div#" + idTarget ).slideToggle( 1000, function() {
         //quando eseguita apertura visualizzo icona freccia
         $("#home-icone .home-icone__infobox > div#" + idTarget + " i").delay(1000).show()
      });
   });

});
// FINE ICON BOX
//***********************************************************************************
//***********************************************************************************

<!-- ICONE #HOMEICONEBST-->
<div id="home-icone" class="container home-icone mv-medium">
   <div class="row">

      <!-- in modalità MD e LG il blocco é a 10 con un offset di 1 a sx e lasciando uno spazio a dx -->
     <!-- in modalità XS e SM il blocco é a 12 con un offset di 0 occupando tutto lo spazio disponibile -->
      <div class="col-sm-12 col-md-10 col-md-offset-1">
         <h2 class="home-icone__title">Click on the icon and discover our services <small>clicca e scopri i nostri servizi</small></h2>

         <i class="icon-desktop"></i>
         <i class="icon-video"></i>
         <i class="icon-camera"></i>
         <i class="icon-newspaper last"></i>

         <!-- blocchi nascosti enumerati da 0 a 3 -->
         <div class="home-icone__infobox">
            <!-- singolo blocco nascosto -->
            <div>
               <h2>Montaggio Video professionale</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper pulvinar diam, feugiat faucibus velit eleifend a. Integer a cursus libero, sit amet ultrices ipsum.</p>
            </div>

            <!-- singolo blocco nascosto -->
            <div>
               <h2>Riprese sul campo da operatori esperti</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper pulvinar diam, feugiat faucibus velit eleifend a. Integer a cursus libero, sit amet ultrices ipsum.</p>
            </div>

            <!-- singolo blocco nascosto -->
            <div>
               <h2>Scatti fotografici professionali live e in studio</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper pulvinar diam, feugiat faucibus velit eleifend a. Integer a cursus libero, sit amet ultrices ipsum.</p>
            </div>

            <!-- singolo blocco nascosto -->
            <div>
               <h2>Siti web e comunicazione integrata.</h2>
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec semper pulvinar diam, feugiat faucibus velit eleifend a. Integer a cursus libero, sit amet ultrices ipsum.</p>
            </div>

         </div>
         <!-- fine blocchi nascosti enumerati da 0 a 3 -->

      </div>
   </div>
</div>
<!-- FINE ICONE -->