Не удалось переопределить предыдущую функцию щелчка в jquery

Question

У меня есть скрипт, который показывает и скрывает содержимое с помощью функции щелчка jQuery. Проблема возникает, когда я вводил закрытую кнопку, которая не закрывается при ее использовании. По какой-то причине он не мог переопределить предыдущий класс.

Вот код

var item = $('.list-item'); 
 

 
$(item).click(function() { 
 

 
    $(this).addClass("active"); 
 
    $(item).not(this).removeClass('active'); 
 
    $(this).find('.exhibitor-content').addClass('block'); 
 
    $(item).not(this).find('.exhibitor-content').removeClass('block'); 
 

 
    var exhibitor_wrap = $(this).find('.exhibitor-wrap').height(); 
 
    var exhibitor_content = $(this).find('.exhibitor-content').height(); 
 
    var total_height = exhibitor_wrap + exhibitor_content + 28 + 56; 
 

 
    $(this).find('.item-wrap').css({ 
 
    transition: 'height 350ms ease', 
 
    height: total_height + 'px' 
 
    }); 
 

 
    $(item).not(this).find('.item-wrap').css({ 
 
    transition: 'height 350ms ease', 
 
    height: 'auto' 
 
    }); 
 

 
}); 
 

 
$('.close-link').click(function(event) { 
 

 
    event.preventDefault(); 
 

 
    $(this).parent().removeClass('block'); 
 

 
});

.future-exhibitor-links, 
 
.exhibitor-list, 
 
.list--unstyled { 
 
    margin-left: 0; 
 
    padding-left: 0; 
 
    list-style-type: none; 
 
} 
 

 
.exhibitor-category { 
 
    position: relative; 
 
    display: block; 
 
    font-size: 14px; 
 
    font-size: 0.875rem; 
 
    line-height: 1.5em; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
} 
 

 
.exhibitor-wrap { 
 
    padding-top: 28px; 
 
    padding-top: 1.75rem; 
 
    padding-bottom: 28px; 
 
    padding-bottom: 1.75rem; 
 
    padding-left: 10px; 
 
    padding-left: 0.625rem; 
 
    padding-right: 10px; 
 
    padding-right: 0.625rem; 
 
} 
 

 
.exhibitor-wrap:hover { 
 
    background-color: #f6f6f6; 
 
    cursor: pointer; 
 
} 
 

 
.exhibitor-wrap:hover .exhibitor-category { 
 
    color: #111; 
 
} 
 

 
.active .exhibitor-wrap { 
 
    background-color: #e1e1e1; 
 
} 
 

 
.active .exhibitor-wrap:hover { 
 
    background-color: #e1e1e1; 
 
} 
 

 
.exhibitor-icon { 
 
    display: block; 
 
    width: 50px; 
 
    width: 3.125rem; 
 
    height: 50px; 
 
    height: 3.125rem; 
 
    margin: 0 auto 7px; 
 
    margin: 0 auto 0.4375rem; 
 
    background-position: 0 0; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.exhibitor-category-list { 
 
    position: relative; 
 
    margin-bottom: 28px; 
 
    margin-bottom: 1.75rem; 
 
    *zoom: 1; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-flex-wrap: wrap; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
} 
 

 
.exhibitor-category-list:before, 
 
.exhibitor-category-list:after { 
 
    content: ''; 
 
    display: table; 
 
} 
 

 
.exhibitor-category-list:after { 
 
    clear: both; 
 
} 
 

 
.exhibitor-category-list>.list-item { 
 
    *zoom: 1; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    display: inline-block; 
 
    width: 50%; 
 
} 
 

 
.exhibitor-category-list>.list-item:before, 
 
.exhibitor-category-list>.list-item:after { 
 
    content: ''; 
 
    display: table; 
 
} 
 

 
.exhibitor-category-list>.list-item:after { 
 
    clear: both; 
 
} 
 

 
.exhibitor-category-list>.list-item:hover { 
 
    background-color: #f6f6f6; 
 
} 
 

 
@media screen and (min-width: 568px) { 
 
    .exhibitor-category-list>.list-item { 
 
    width: 33.33333333333333%; 
 
    } 
 
} 
 

 
@media screen and (min-width: 768px) { 
 
    .exhibitor-category-list>.list-item { 
 
    width: 25%; 
 
    } 
 
} 
 

 
.exhibitor-content { 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    background-color: #e1e1e1; 
 
    z-index: 3; 
 
    padding: 28px 28px 0; 
 
    padding: 1.75rem 28px 0; 
 
    padding: 1.75rem 1.75rem 0; 
 
    display: none; 
 
} 
 

 
.exhibitor-content.block { 
 
    display: block; 
 
} 
 

 
.exhibitor-list { 
 
    padding-bottom: 28px; 
 
    padding-bottom: 1.75rem; 
 
} 
 

 
.exhibitor-list>.exhibitor-list-item { 
 
    *zoom: 1; 
 
    border-bottom: 1px dotted #959595; 
 
    padding-bottom: 14px; 
 
    padding-bottom: 0.875rem; 
 
    margin-bottom: 14px; 
 
    margin-bottom: 0.875rem; 
 
} 
 

 
.exhibitor-list>.exhibitor-list-item:before, 
 
.exhibitor-list>.exhibitor-list-item:after { 
 
    content: ''; 
 
    display: table; 
 
} 
 

 
.exhibitor-list>.exhibitor-list-item:after { 
 
    clear: both; 
 
} 
 

 
.exhibitor-list>.exhibitor-list-item:last-child { 
 
    border-bottom: none; 
 
    margin-bottom: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul class="list--unstyled exhibitor-category-list"> 
 
    <li class="list-item active" id="bridal-attire"> 
 
    <div class="item-wrap"> 
 
     <div class="exhibitor-wrap"> 
 
     <i class="exhibitor-icon icon-bridal-attire"></i> 
 
     <span class="exhibitor-category">Bridal Attire</span> 
 
     </div> 
 
     <div class="exhibitor-content block"> 
 
     <h2 class="section-title section-title--primary-dark-med">Bridal Attire</h2> 
 
     <a href="#" class="close-link close-link--top">Close</a> 
 
     <ul class="list--unstyled exhibitor-list"> 
 
      <li class="exhibitor-list-item"> 
 

 
      <div class="exhibitor-logo">logo here</div> 
 
      <div class="exhibitor-details"> 
 

 
       <h3 class="exhibitor-detail--title">Exhibitor 1</h3> 
 
      </div> 
 
      </li> 
 
      <li class="exhibitor-list-item"> 
 

 
      <div class="exhibitor-logo">logo here</div> 
 
      <div class="exhibitor-details"> 
 

 
       <h3 class="exhibitor-detail--title">Exhibitor 2</h3> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     <a href="#" class="close-link close-link--bottom">Close</a> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="list-item" id="caterers"> 
 
    <div class="item-wrap"> 
 
     <div class="exhibitor-wrap"> 
 
     <i class="exhibitor-icon icon-caterers"></i> 
 
     <span class="exhibitor-category">Caterers</span> 
 
     </div> 
 
     <div class="exhibitor-content"> 
 
     <h2 class="section-title section-title--primary-dark-med">Caterers</h2> 
 
     <a href="#" class="close-link close-link--top">Close</a> 
 
     <ul class="list--unstyled exhibitor-list"> 
 
      <li class="exhibitor-list-item"> 
 

 
      <div class="exhibitor-logo">logo here</div> 
 
      <div class="exhibitor-details"> 
 

 
       <h3 class="exhibitor-detail--title">Exhibitor 3</h3> 
 

 

 
      </div> 
 
      <!-- // exhibitor-details --> 
 
      </li> 
 
     </ul> 
 
     <a href="#" class="close-link close-link--bottom">Close</a> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="list-item" id="coordinators"> 
 
    <div class="item-wrap" style="transition: height 350ms ease; height: auto;"> 
 
     <div class="exhibitor-wrap"> 
 
     <i class="exhibitor-icon icon-coordinators"></i> 
 
     <span class="exhibitor-category">Coordinators</span> 
 
     </div> 
 
     <div class="exhibitor-content"> 
 
     <h2 class="section-title section-title--primary-dark-med">Coordinators</h2> 
 
     <a href="#" class="close-link close-link--top">Close</a> 
 
     <ul class="list--unstyled exhibitor-list"> 
 
      <li class="exhibitor-list-item"> 
 

 
      <div class="exhibitor-logo">logo here</div> 
 
      <div class="exhibitor-details"> 
 

 
       <h3 class="exhibitor-detail--title">Exhibitor 4</h3> 
 

 
      </div> 
 
      <!-- // exhibitor-details --> 
 
      </li> 
 
     </ul> 
 
     <a href="#" class="close-link close-link--bottom">Close</a> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="list-item" id="florist-stylist"> 
 
    <div class="item-wrap" style="transition: height 350ms ease; height: auto;"> 
 
     <div class="exhibitor-wrap"> 
 
     <i class="exhibitor-icon icon-florist-stylist"></i> 
 
     <span class="exhibitor-category">Florist &amp; Stylist</span> 
 
     </div> 
 
     <div class="exhibitor-content"> 
 
     <h2 class="section-title section-title--primary-dark-med">Florist &amp; Stylist</h2> 
 
     <a href="#" class="close-link close-link--top">Close</a> 
 
     <ul class="list--unstyled exhibitor-list"> 
 
      <li class="exhibitor-list-item"> 
 

 
      <div class="exhibitor-logo">logo here</div> 
 
      <div class="exhibitor-details"> 
 

 
       <h3 class="exhibitor-detail--title">Exhibitor 5</h3> 
 

 
      </div> 
 
      <!-- // exhibitor-details --> 
 
      </li> 
 
     </ul> 
 
     <a href="#" class="close-link close-link--bottom">Close</a> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="list-item" id="photography"> 
 
    <div class="item-wrap" style="transition: height 350ms ease; height: auto;"> 
 
     <div class="exhibitor-wrap"> 
 
     <i class="exhibitor-icon icon-photography"></i> 
 
     <span class="exhibitor-category">Photography</span> 
 
     </div> 
 
     <div class="exhibitor-content"> 
 
     <h2 class="section-title section-title--primary-dark-med">Photography</h2> 
 
     <a href="#" class="close-link close-link--top">Close</a> 
 
     <ul class="list--unstyled exhibitor-list"> 
 
      <li class="exhibitor-list-item"> 
 

 
      <div class="exhibitor-logo">logo here</div> 
 
      <div class="exhibitor-details"> 
 

 
       <h3 class="exhibitor-detail--title">Exhibitor 6</h3> 
 

 
      </div> 
 
      <!-- // exhibitor-details --> 
 
      </li> 
 
     </ul> 
 
     <a href="#" class="close-link close-link--bottom">Close</a> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="list-item" id="videography"> 
 
    <div class="item-wrap" style="transition: height 350ms ease; height: auto;"> 
 
     <div class="exhibitor-wrap"> 
 
     <i class="exhibitor-icon icon-videography"></i> 
 
     <span class="exhibitor-category">Videography</span> 
 
     </div> 
 
     <div class="exhibitor-content"> 
 
     <h2 class="section-title section-title--primary-dark-med">Videography</h2> 
 
     <a href="#" class="close-link close-link--top">Close</a> 
 
     <ul class="list--unstyled exhibitor-list"> 
 
      <li class="exhibitor-list-item"> 
 

 
      <div class="exhibitor-logo">logo here</div> 
 
      <div class="exhibitor-details"> 
 

 
       <h3 class="exhibitor-detail--title">Exhibitor 7</h3> 
 

 
      </div> 
 
      <!-- // exhibitor-details --> 
 
      </li> 
 
     </ul> 
 
     <a href="#" class="close-link close-link--bottom">Close</a> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</ul>

Любая помощь очень ценится. Благодарю.

Answer 1

Ваши обработчики кликов конфликтуют. Используйте event.stopPropagation() на обработчик .close-link щелчка, чтобы сохранить этот щелчок от бурлит и вызвав щелчок на item

var item = $('.list-item'); 
 

 
$(item).click(function() { 
 

 
    $(this).addClass("active"); 
 
    $(item).not(this).removeClass('active'); 
 
    $(this).find('.exhibitor-content').addClass('block'); 
 
    $(item).not(this).find('.exhibitor-content').removeClass('block'); 
 

 
    var exhibitor_wrap = $(this).find('.exhibitor-wrap').height(); 
 
    var exhibitor_content = $(this).find('.exhibitor-content').height(); 
 
    var total_height = exhibitor_wrap + exhibitor_content + 28 + 56; 
 

 
    $(this).find('.item-wrap').css({ 
 
    transition: 'height 350ms ease', 
 
    height: total_height + 'px' 
 
    }); 
 

 
    $(item).not(this).find('.item-wrap').css({ 
 
    transition: 'height 350ms ease', 
 
    height: 'auto' 
 
    }); 
 

 
}); 
 

 
$('.close-link').click(function(event) { 
 

 
    event.preventDefault(); 
 

 
    $(this).parent().removeClass('block'); 
 
    event.stopPropagation(); 
 

 
});

.future-exhibitor-links, 
 
.exhibitor-list, 
 
.list--unstyled { 
 
    margin-left: 0; 
 
    padding-left: 0; 
 
    list-style-type: none; 
 
} 
 

 
.exhibitor-category { 
 
    position: relative; 
 
    display: block; 
 
    font-size: 14px; 
 
    font-size: 0.875rem; 
 
    line-height: 1.5em; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
} 
 

 
.exhibitor-wrap { 
 
    padding-top: 28px; 
 
    padding-top: 1.75rem; 
 
    padding-bottom: 28px; 
 
    padding-bottom: 1.75rem; 
 
    padding-left: 10px; 
 
    padding-left: 0.625rem; 
 
    padding-right: 10px; 
 
    padding-right: 0.625rem; 
 
} 
 

 
.exhibitor-wrap:hover { 
 
    background-color: #f6f6f6; 
 
    cursor: pointer; 
 
} 
 

 
.exhibitor-wrap:hover .exhibitor-category { 
 
    color: #111; 
 
} 
 

 
.active .exhibitor-wrap { 
 
    background-color: #e1e1e1; 
 
} 
 

 
.active .exhibitor-wrap:hover { 
 
    background-color: #e1e1e1; 
 
} 
 

 
.exhibitor-icon { 
 
    display: block; 
 
    width: 50px; 
 
    width: 3.125rem; 
 
    height: 50px; 
 
    height: 3.125rem; 
 
    margin: 0 auto 7px; 
 
    margin: 0 auto 0.4375rem; 
 
    background-position: 0 0; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.exhibitor-category-list { 
 
    position: relative; 
 
    margin-bottom: 28px; 
 
    margin-bottom: 1.75rem; 
 
    *zoom: 1; 
 
    display: -webkit-box; 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-flex-wrap: wrap; 
 
    -ms-flex-wrap: wrap; 
 
    flex-wrap: wrap; 
 
} 
 

 
.exhibitor-category-list:before, 
 
.exhibitor-category-list:after { 
 
    content: ''; 
 
    display: table; 
 
} 
 

 
.exhibitor-category-list:after { 
 
    clear: both; 
 
} 
 

 
.exhibitor-category-list > .list-item { 
 
    *zoom: 1; 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    display: inline-block; 
 
    width: 50%; 
 
} 
 

 
.exhibitor-category-list > .list-item:before, 
 
.exhibitor-category-list > .list-item:after { 
 
    content: ''; 
 
    display: table; 
 
} 
 

 
.exhibitor-category-list > .list-item:after { 
 
    clear: both; 
 
} 
 

 
.exhibitor-category-list > .list-item:hover { 
 
    background-color: #f6f6f6; 
 
} 
 

 
@media screen and (min-width: 568px) { 
 
    .exhibitor-category-list > .list-item { 
 
    width: 33.33333333333333%; 
 
    } 
 
} 
 

 
@media screen and (min-width: 768px) { 
 
    .exhibitor-category-list > .list-item { 
 
    width: 25%; 
 
    } 
 
} 
 

 
.exhibitor-content { 
 
    position: absolute; 
 
    left: 0; 
 
    width: 100%; 
 
    background-color: #e1e1e1; 
 
    z-index: 3; 
 
    padding: 28px 28px 0; 
 
    padding: 1.75rem 28px 0; 
 
    padding: 1.75rem 1.75rem 0; 
 
    display: none; 
 
} 
 

 
.exhibitor-content.block { 
 
    display: block; 
 
} 
 

 
.exhibitor-list { 
 
    padding-bottom: 28px; 
 
    padding-bottom: 1.75rem; 
 
} 
 

 
.exhibitor-list > .exhibitor-list-item { 
 
    *zoom: 1; 
 
    border-bottom: 1px dotted #959595; 
 
    padding-bottom: 14px; 
 
    padding-bottom: 0.875rem; 
 
    margin-bottom: 14px; 
 
    margin-bottom: 0.875rem; 
 
} 
 

 
.exhibitor-list > .exhibitor-list-item:before, 
 
.exhibitor-list > .exhibitor-list-item:after { 
 
    content: ''; 
 
    display: table; 
 
} 
 

 
.exhibitor-list > .exhibitor-list-item:after { 
 
    clear: both; 
 
} 
 

 
.exhibitor-list > .exhibitor-list-item:last-child { 
 
    border-bottom: none; 
 
    margin-bottom: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="list--unstyled exhibitor-category-list"> 
 
    <li class="list-item active" id="bridal-attire"> 
 
    <div class="item-wrap"> 
 
     <div class="exhibitor-wrap"> 
 
     <i class="exhibitor-icon icon-bridal-attire"></i> 
 
     <span class="exhibitor-category">Bridal Attire</span> 
 
     </div> 
 
     <div class="exhibitor-content block"> 
 
     <h2 class="section-title section-title--primary-dark-med">Bridal Attire</h2> 
 
     <a href="#" class="close-link close-link--top">Close</a> 
 
     <ul class="list--unstyled exhibitor-list"> 
 
      <li class="exhibitor-list-item"> 
 

 
      <div class="exhibitor-logo">logo here</div> 
 
      <div class="exhibitor-details"> 
 

 
       <h3 class="exhibitor-detail--title">Exhibitor 1</h3> 
 
      </div> 
 
      </li> 
 
      <li class="exhibitor-list-item"> 
 

 
      <div class="exhibitor-logo">logo here</div> 
 
      <div class="exhibitor-details"> 
 

 
       <h3 class="exhibitor-detail--title">Exhibitor 2</h3> 
 
      </div> 
 
      </li> 
 
     </ul> 
 
     <a href="#" class="close-link close-link--bottom">Close</a> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="list-item" id="caterers"> 
 
    <div class="item-wrap"> 
 
     <div class="exhibitor-wrap"> 
 
     <i class="exhibitor-icon icon-caterers"></i> 
 
     <span class="exhibitor-category">Caterers</span> 
 
     </div> 
 
     <div class="exhibitor-content"> 
 
     <h2 class="section-title section-title--primary-dark-med">Caterers</h2> 
 
     <a href="#" class="close-link close-link--top">Close</a> 
 
     <ul class="list--unstyled exhibitor-list"> 
 
      <li class="exhibitor-list-item"> 
 

 
      <div class="exhibitor-logo">logo here</div> 
 
      <div class="exhibitor-details"> 
 

 
       <h3 class="exhibitor-detail--title">Exhibitor 3</h3> 
 

 

 
      </div> 
 
      <!-- // exhibitor-details --> 
 
      </li> 
 
     </ul> 
 
     <a href="#" class="close-link close-link--bottom">Close</a> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="list-item" id="coordinators"> 
 
    <div class="item-wrap" style="transition: height 350ms ease; height: auto;"> 
 
     <div class="exhibitor-wrap"> 
 
     <i class="exhibitor-icon icon-coordinators"></i> 
 
     <span class="exhibitor-category">Coordinators</span> 
 
     </div> 
 
     <div class="exhibitor-content"> 
 
     <h2 class="section-title section-title--primary-dark-med">Coordinators</h2> 
 
     <a href="#" class="close-link close-link--top">Close</a> 
 
     <ul class="list--unstyled exhibitor-list"> 
 
      <li class="exhibitor-list-item"> 
 

 
      <div class="exhibitor-logo">logo here</div> 
 
      <div class="exhibitor-details"> 
 

 
       <h3 class="exhibitor-detail--title">Exhibitor 4</h3> 
 

 

 
      </div> 
 
      <!-- // exhibitor-details --> 
 
      </li> 
 
     </ul> 
 
     <a href="#" class="close-link close-link--bottom">Close</a> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="list-item" id="florist-stylist"> 
 
    <div class="item-wrap" style="transition: height 350ms ease; height: auto;"> 
 
     <div class="exhibitor-wrap"> 
 
     <i class="exhibitor-icon icon-florist-stylist"></i> 
 
     <span class="exhibitor-category">Florist &amp; Stylist</span> 
 
     </div> 
 
     <div class="exhibitor-content"> 
 
     <h2 class="section-title section-title--primary-dark-med">Florist &amp; Stylist</h2> 
 
     <a href="#" class="close-link close-link--top">Close</a> 
 
     <ul class="list--unstyled exhibitor-list"> 
 
      <li class="exhibitor-list-item"> 
 

 
      <div class="exhibitor-logo">logo here</div> 
 
      <div class="exhibitor-details"> 
 

 
       <h3 class="exhibitor-detail--title">Exhibitor 5</h3> 
 

 

 
      </div> 
 
      <!-- // exhibitor-details --> 
 
      </li> 
 
     </ul> 
 
     <a href="#" class="close-link close-link--bottom">Close</a> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="list-item" id="photography"> 
 
    <div class="item-wrap" style="transition: height 350ms ease; height: auto;"> 
 
     <div class="exhibitor-wrap"> 
 
     <i class="exhibitor-icon icon-photography"></i> 
 
     <span class="exhibitor-category">Photography</span> 
 
     </div> 
 
     <div class="exhibitor-content"> 
 
     <h2 class="section-title section-title--primary-dark-med">Photography</h2> 
 
     <a href="#" class="close-link close-link--top">Close</a> 
 
     <ul class="list--unstyled exhibitor-list"> 
 
      <li class="exhibitor-list-item"> 
 

 
      <div class="exhibitor-logo">logo here</div> 
 
      <div class="exhibitor-details"> 
 

 
       <h3 class="exhibitor-detail--title">Exhibitor 6</h3> 
 

 

 
      </div> 
 
      <!-- // exhibitor-details --> 
 
      </li> 
 
     </ul> 
 
     <a href="#" class="close-link close-link--bottom">Close</a> 
 
     </div> 
 
    </div> 
 
    </li> 
 
    <li class="list-item" id="videography"> 
 
    <div class="item-wrap" style="transition: height 350ms ease; height: auto;"> 
 
     <div class="exhibitor-wrap"> 
 
     <i class="exhibitor-icon icon-videography"></i> 
 
     <span class="exhibitor-category">Videography</span> 
 
     </div> 
 
     <div class="exhibitor-content"> 
 
     <h2 class="section-title section-title--primary-dark-med">Videography</h2> 
 
     <a href="#" class="close-link close-link--top">Close</a> 
 
     <ul class="list--unstyled exhibitor-list"> 
 
      <li class="exhibitor-list-item"> 
 

 
      <div class="exhibitor-logo">logo here</div> 
 
      <div class="exhibitor-details"> 
 

 
       <h3 class="exhibitor-detail--title">Exhibitor 7</h3> 
 

 

 
      </div> 
 
      <!-- // exhibitor-details --> 
 
      </li> 
 
     </ul> 
 
     <a href="#" class="close-link close-link--bottom">Close</a> 
 
     </div> 
 
    </div> 
 
    </li> 
 
</ul>