Удалить пустое пространство ниже раздела div

Question

У меня есть div, который включает в себя два изображения, которые при каждом нажатии на них показывают некоторый текст.

$('span.a, span.b').click(function() { 
 
    if (!$(this).hasClass('active')) { 
 
    $('span.a, span.b').removeClass('active'); 
 
    $(this).addClass('active'); 
 
    $('div.a, div.b').toggle(); 
 
    } 
 
    $('div.a, div.b').css("visibility","visible") 
 
});

div.a, 
 
div.b { 
 
    visibility:hidden; 
 
} 
 

 
.footer { 
 
    font-family:'Arial'; 
 
    font-size:13px; 
 
    background-color:#000; 
 
    color:#fff; 
 
    text-align:center; 
 
    padding:20px; 
 
}

<div style="background-color:#fff;"><center><span class="a active"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/10/Customers.jpg" width="200"> </span> 
 
    <span class="b"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/12/Landlords.jpg" width="200"></span> 
 
    <div class="a">Cornerstone Parking provides value for money parking in Brisbane’s CBD and surrounding suburbs. Our turn up and park rates (ie no need to pre-book) are often cheaper than other car park’s online discount rates and you can always be sure of getting a 
 
    bay in a Cornerstone car park. Our convenient and centrally located CBD car parks are run by our friendly staff and are predominantly located in the Adelaide Street, Ann Street and Creek Street areas. Our car parks offer discounted parking in large 
 
    bays with ample height clearance. We offer hourly (visitor) parking as well as monthly parking, early bird parking and motorbike parking in most of our car parks.</div> 
 
    <div class="b" style="display:none">Cornerstone Parking provides a high quality, professional and technology driven car park management service. A part of the Cornerstone Group, our property development and management heritage provides us with a true appreciation of landlord issues. Our 
 
    parent company backing means that Cornerstone Parking has the appetite and ability to participate in larger parking projects, including the development of new car parks. We provide owners, investors and developers with our car park management, advisory 
 
    and consultation services.</div> 
 
</center> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script></div> 
 
<div class="footer">Footer content 
 
</div>

У меня есть два вопроса: мне нужно большое белое пространство ниже двух изображений в первом DIV быть сведено к минимуму - это может быть сделано?

Также возможно использование кода Javascript, который снова скроет текст при повторном нажатии на изображение?

Спасибо!

Answer 1

Дополнительное пространство исходит от использования visibility: hidden;, который оставит макет скрытого содержимого на странице, но спрячет его визуально (поэтому он невидим). Вместо этого используйте display: none;, чтобы удалить макет содержимого со страницы, как если бы он никогда не был там.

Затем вы можете упростить jQuery и просто переключить класс для обозначения активных/неактивных изображений, а затем использовать селекторные ролики в CSS для отображения активного содержимого.

$('span.a, span.b').click(function() { 
 
    $(this).siblings().removeClass('active'); 
 
    $(this).toggleClass('active'); 
 
});

div.a, 
 
div.b { 
 
    display: none; 
 
} 
 

 
.a.active ~ .a, .b.active ~ .b { 
 
    display: block; 
 
} 
 

 
.footer { 
 
    font-family:'Arial'; 
 
    font-size:13px; 
 
    background-color:#000; 
 
    color:#fff; 
 
    text-align:center; 
 
    padding:20px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="background-color:#fff;"> 
 
    <center><span class="a active"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/10/Customers.jpg" width="200"> </span> 
 
    <span class="b"> <img src="http://cornerstoneparking.portfolio.com.au/wp-content/uploads/2016/12/Landlords.jpg" width="200"></span> 
 
    <div class="a">Cornerstone Parking provides value for money parking in Brisbane’s CBD and surrounding suburbs. Our turn up and park rates (ie no need to pre-book) are often cheaper than other car park’s online discount rates and you can always be sure of getting 
 
     a bay in a Cornerstone car park. Our convenient and centrally located CBD car parks are run by our friendly staff and are predominantly located in the Adelaide Street, Ann Street and Creek Street areas. Our car parks offer discounted parking in 
 
     large bays with ample height clearance. We offer hourly (visitor) parking as well as monthly parking, early bird parking and motorbike parking in most of our car parks.</div> 
 
    <div class="b">Cornerstone Parking provides a high quality, professional and technology driven car park management service. A part of the Cornerstone Group, our property development and management heritage provides us with a true appreciation of landlord issues. 
 
     Our parent company backing means that Cornerstone Parking has the appetite and ability to participate in larger parking projects, including the development of new car parks. We provide owners, investors and developers with our car park management, 
 
     advisory and consultation services.</div> 
 
    </center> 
 
</div> 
 
<div class="footer">Footer content 
 
</div>

Answer 2

Ваша функция JavaScript проверяет только если класс не активен с

if (!$(this).hasClass('active')) 

Вы должны написать еще заявление, чтобы переключить видимость.

Белое пространство является проблемой стиля. Вы должны отредактировать маржу/дополнение в CSS.