Changing Content upon link click

Question

I have already tried applying some of the suggestions here but it doesn't seem to work on my task as it still shows the two div paragraph that I made. I wanted to lessen creating different pages just to output a couple of text so I decided that this could be the best course. But it is not working as how i imagined it to be. Here is the Link of what I am trying to do. And what i wanted was to have is when the chef link is clicked, the content for the origin link's paragraph and image will both change, vice versa.

and here is the summary of the code

$(document).ready(function() {
  $("a").click(function() {
    var id = $(this).attribute("data-id"); // Using a custom attribute.
    $("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
    $(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-wrapper">
  <h1> ABOUT US </h1>
  <h2><a href="#origin" data-id="1" class="menu-text">The Origin</a> <span style="font-size: 56px;">||</span> <a href="#chef" data-id="2" class="menu-text">The Chef</a></h2>
  <!---Start Banner Wrapper Section-->
  <div id="pages">
    <div class="mydivshow div1">
      <section class="left-col">
        <h1> Sakurajima Origin </h1>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi nibh, dictum eu laoreet at, rhoncus eget eros. Etiam elementum id nulla a accumsan. Etiam commodo fermentum sagittis. Etiam non tellus eget arcu elementum tempus. Proin pretium
          velit quis sem porttitor, eu vulputate diam ultricies. Phasellus sollicitudin gravida tortor nec ullamcorper. Sed neque lorem, tempus vel leo non, finibus fringilla velit. Quisque pellentesque diam enim, pulvinar viverra lorem hendrerit eu.
          Pellentesque porta, nisl non efficitur eleifend, lorem mauris placerat lectus, non accumsan massa ante in nisl. Fusce ornare bibendum erat. Cras placerat convallis ante, in accumsan sem cursus placerat. Pellentesque in mauris augue. Phasellus
          quis nibh felis. Aenean vulputate vestibulum nisl, a sollicitudin metus. Sed eleifend eget nulla ut consectetur. Nam venenatis scelerisque quam in viverra.</p>
        <p>Curabitur quis tellus eget risus hendrerit vulputate. Phasellus sit amet nisi commodo, semper sapien sed, finibus purus. Duis et eleifend erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut urna dapibus, placerat orci a, euismod
          justo. Fusce placerat nisi sit amet pharetra mollis. Donec aliquam turpis ac ligula commodo dapibus. Suspendisse facilisis consectetur tortor id condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
          Pellentesque et sollicitudin eros, a tempus erat.</p>
      </section>
      <section class="sidebar">
        <img src="https://www.japantimes.co.jp/wp-content/uploads/2013/01/fv20120408a1b.jpg">
      </section>
    </div>

    <div class="mydivhide div2">
      <section class="left-col">
        <h1> Chef Kojirō Shinomiya </h1>
        <p> Upon arrival in France, Kojirō immediately set off to work to make a name for himself. Setbacks soon followed him though in his first days around Paris, losing one of his luggage bags at the airport and being rejected from several restaurants.
          He later reflected on how much easier it was in Japan where every restaurant had previously wanted him to work for them. He could not even be counseled by his friends there as he had told them not to contact him or that he would not get in touch
          with them until he had succeeded. When Kojirō finally did manage to land a position after impressing the head chef, he was soon fired after being sabotaged by the sous chef who retaliated after being caught by Kojirō trying to pass off sub-standard
          meat in the restaurant. Frustrated but unwilling to give up, Kojirō sought refuge at a library, looking up different recipes so he could continue his training. As the library was preparing to close, Kojirō ran into someone unexpected.</p>
        <p>Kojirō obtained his own restaurant, he performed well for the first few initial months, but it became apparent that he was facing adversity from the people there who belittled his ambitions. After his chefs began to disobey his judgments, Kojirō
          reached a period of depression due to the rapid decrease in work quality and positive feedback. It was at this time that he changed his entire work ethic and treatment of his employees. He fired his insubordinate chefs and became a ruthless
          head chef, intimidating his workers to obey his judgments. Because of this, Kojirō finally emerged out of his slump and the people of France began to revere him as a French Cuisine genius. After many years of hard work, Kojirō was awarded the
          Pluspol award that he had long sought after.</p>
      </section>
      <section class="sidebar">
        <img src="https://i.pinimg.com/originals/a6/41/0b/a6410b66dc1698ab56a0e57f9e933114.jpg">
      </section>
    </div>
    <!---ENd Start Banner Wrapper Section-->
  </div>
</div>

i did not include css here since it just makes the page pretty but you can still see that on the link above.

Do you guys know what I did wrong? and how could i fix this?

Answer 1

Check your jquery. There is no definition for attribute()by default, it should be attr(). Check below snippet for reference.

$(document).ready(function() {
  $("a").click(function() {
    var id = $(this).attr("data-id"); // Using a custom attribute.

    $("#pages div").hide(); // gather all the div tags under the element with the id pages and hide them.
    $(".div" + id).show(); // Show the div with the class of .divX where X is the number stored in the data-id of the object that was clicked.
  });
});

* {
  margin: 0;
  border: 0;
  padding: 0;
}

body {
  background-color: #FFF;
  font-family: 'Hindi', sans-serif;
  font-size: 18px;
  position: relative;
}

h1 {
  font-family: 'Times', sans-serif;
  text-align: center;
  font-size: 250%;
  color: #ae396d;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding: 3% 0;
}

h2 {
  font-family: 'Times', sans-serif;
  text-align: center;
  color: #ae396d;
  letter-spacing: 2%;
  margin-top: -35px;
}

h3 {
  font-family: 'Times', sans-serif;
  text-align: center;
  color: #741C57;
  text-transform: uppercase;
  letter-spacing: 1%;
}

p {
  padding: 2%;
  color: #4A4444;
  text-align: justify;
}

img {
  max-width: 100%;
  max-height: auto;
}

#banner-wrapper {
  max-width: 1280px;
  margin: 0 auto;
}

.left-col {
  width: 60%;
  float: left;
  margin: 4% 0 4% 4%;
}

.sidebar {
  width: 26%;
  float: right;
  margin: 4% 4%;
}

.sidebar img {
  opacity: 0.8;
  margin-top: 100px;
}

.clearfix {
  clear: both;
}


/*---Start Media Queries--*/

@media screen and (max-width: 768px) {
  .slider .bx-wrapper .bx-controls {
    display: none;
  }
  .slider1 li img {
    width: 100%;
    height: auto;
    margin-top: 51px;
  }
  .parallax-inner {
    display: none;
  }
  .one-third {
    width: 100%;
    margin: 4% 0;
  }
  .one-half {
    display: none;
  }
  h1 {
    font-size: 125%;
  }
  .left-col {
    width: 100%;
    margin: 0 0 3% 0;
  }
  .sidebar {
    width: 100%;
    margin: 0;
  }
  h3 {
    padding-top: 3%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-wrapper">
  <h1> ABOUT US </h1>
  <h2><a href="#origin" data-id="1" class="menu-text">The Origin</a> <span style="font-size: 56px;">||</span> <a href="#chef" data-id="2" class="menu-text">The Chef</a></h2>
  <!---Start Banner Wrapper Section-->
  <div id="pages">
    <div class="mydivshow div1">
      <section class="left-col">
        <h1> Sakurajima Origin </h1>
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi nibh, dictum eu laoreet at, rhoncus eget eros. Etiam elementum id nulla a accumsan. Etiam commodo fermentum sagittis. Etiam non tellus eget arcu elementum tempus. Proin pretium
          velit quis sem porttitor, eu vulputate diam ultricies. Phasellus sollicitudin gravida tortor nec ullamcorper. Sed neque lorem, tempus vel leo non, finibus fringilla velit. Quisque pellentesque diam enim, pulvinar viverra lorem hendrerit eu.
          Pellentesque porta, nisl non efficitur eleifend, lorem mauris placerat lectus, non accumsan massa ante in nisl. Fusce ornare bibendum erat. Cras placerat convallis ante, in accumsan sem cursus placerat. Pellentesque in mauris augue. Phasellus
          quis nibh felis. Aenean vulputate vestibulum nisl, a sollicitudin metus. Sed eleifend eget nulla ut consectetur. Nam venenatis scelerisque quam in viverra.</p>
        <p>Curabitur quis tellus eget risus hendrerit vulputate. Phasellus sit amet nisi commodo, semper sapien sed, finibus purus. Duis et eleifend erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut urna dapibus, placerat orci a, euismod
          justo. Fusce placerat nisi sit amet pharetra mollis. Donec aliquam turpis ac ligula commodo dapibus. Suspendisse facilisis consectetur tortor id condimentum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
          Pellentesque et sollicitudin eros, a tempus erat.</p>
      </section>
      <section class="sidebar">
        <img src="https://www.japantimes.co.jp/wp-content/uploads/2013/01/fv20120408a1b.jpg">
      </section>
    </div>

    <div class="mydivhide div2" style="display:none;">
      <section class="left-col">
        <h1> Chef Kojirō Shinomiya </h1>
        <p> Upon arrival in France, Kojirō immediately set off to work to make a name for himself. Setbacks soon followed him though in his first days around Paris, losing one of his luggage bags at the airport and being rejected from several restaurants.
          He later reflected on how much easier it was in Japan where every restaurant had previously wanted him to work for them. He could not even be counseled by his friends there as he had told them not to contact him or that he would not get in touch
          with them until he had succeeded. When Kojirō finally did manage to land a position after impressing the head chef, he was soon fired after being sabotaged by the sous chef who retaliated after being caught by Kojirō trying to pass off sub-standard
          meat in the restaurant. Frustrated but unwilling to give up, Kojirō sought refuge at a library, looking up different recipes so he could continue his training. As the library was preparing to close, Kojirō ran into someone unexpected.</p>
        <p>Kojirō obtained his own restaurant, he performed well for the first few initial months, but it became apparent that he was facing adversity from the people there who belittled his ambitions. After his chefs began to disobey his judgments, Kojirō
          reached a period of depression due to the rapid decrease in work quality and positive feedback. It was at this time that he changed his entire work ethic and treatment of his employees. He fired his insubordinate chefs and became a ruthless
          head chef, intimidating his workers to obey his judgments. Because of this, Kojirō finally emerged out of his slump and the people of France began to revere him as a French Cuisine genius. After many years of hard work, Kojirō was awarded the
          Pluspol award that he had long sought after.</p>
      </section>
      <section class="sidebar">
        <img src="https://i.pinimg.com/originals/a6/41/0b/a6410b66dc1698ab56a0e57f9e933114.jpg">
      </section>
    </div>
    <!---ENd Start Banner Wrapper Section-->
  </div>
</div>

Answer 2

The only thing wrong in your JS code is that you used attribute while the method is attr

$(document).ready(function() {
    $("a").click(function() {
        var id = $(this).attr("data-id");
        $("#pages div").hide();
        $(".div" + id).show();
    });
});

Answer 3

try this code. .attr is used to get the attribute and nor .attribure

var id = $(this).attr("data-id");