TriSTaR TriSTaR - 5 months ago 17
jQuery Question

Сreate an anchor that will change the content when you click

I have content (with information) and links, how can I change the content when the links above are clicked? Almost like a slider, but simple...
Can anyone show me an example?

enter image description here

Answer

What you need to do is show/hide your content when the links are clicked.

Check out the example below :

$(function() {
  $("#one").show();
  $(".tile").click(function() {
    $(".tile").removeClass("selected");
    $(".content").slideUp(500);
    $("#" + $(this).data("link")).slideToggle(500);
    $(this).toggleClass("selected");
  });
});
.tile {
  padding: 10px;
  border: 2px blue solid;
  display: inline-block;
}
.content {
  display: none;
  border: 2px green solid;
  padding: 30px;
  width: 110px;
}
.selected {
  background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tile selected" data-link="one">One</div>
<div class="tile" data-link="two">Two</div>
<div class="tile" data-link="three">Three</div>
<hr/>
<div class="content" id="one">Content for #One Tile</div>
<div class="content" id="two">Content for #Two Tile</div>
<div class="content" id="three">Content for #Three Tile</div>

As you are new to jQuery do read these to understand what's happening in above example :

  1. https://api.jquery.com/click/
  2. https://api.jquery.com/slideup/
  3. https://api.jquery.com/slidetoggle/
  4. https://api.jquery.com/data/
Comments