删除 div 部分下方的空白区域

Question

I have a div that includes two images that when each is clicked they reveal some text.

 $('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>

I have two questions: I need the large white space below the two images in the first div to be minimised - can this be done?

Also is it possible for a Javascript code that will hide the text again when the images are clicked again?

Thanks!

Answer 1

The extra space comes from using visibility: hidden; which will leave the layout of the hidden content on the page, but hide it visually (so it's invisible). Use display: none; instead to remove the content's layout from the page as if it were never there.

Then you can simplify your jQuery and just toggle a class to designate active/inactive images, then use sibling selectors in CSS to show the active content.

 $('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

Your JavaScript function only checks if the class is not active with

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

You should write an else statement to toggle the visibility.

The white space is a styling issue. You should edit the margin/padding in CSS.