PortfolioCreative PortfolioCreative - 4 years ago 90
HTML Question

Tabs - need content to be hidden on page load and revealed when clicked

I have created a tab system. It seems to work mostly perfectly on JSFiddle for what I need it for except on here runs an error code and I need the tab content on both tabs to be hidden at first and only revealed when the tab (images) are clicked. Can anyone help with these problems?

I'm quite new to Javascript. Thanks in advance.

I'm only quite new to Javascript, so need a little help. Thanks in advance!



$('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 {
margin-top: 40px;
width: 80%;
text-align: left;
}

<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>




Answer Source

Adding jQuery towards the end the body tag (in the code snippet it is the end of html code) solves your problem.

Please let me know if that is what you wanted to know.

Since your js code uses the jQuery library syntax, you need to add jQuery library like this:

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

For the hiding part you can make the divs hide by:

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

And then in the js edit the visibility to visible on click

$('div.a, div.b').css("visibility","visible")

Visibility hides the content but the space will still be consumed. If you want to let the invisible content take any space in the page, play with the "display" css property instead of visibility.

You can find the complete code below:

$('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 {
  margin-top: 40px;
  width: 80%;
  text-align: left;
}
div.a,
div.b {
  visibility:hidden;
}
<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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download