CODEWITHSUNDEEP
javascriptjquery
kneijenhuijs
kneijenhuijs

Reputation: 1209

Change content in div on link click

I've been trying to adapt the answer to the first answer of this question to my own practice project. Building a resume website, where I want to be able to show three different portfolio's based on a click on a hyperlink.

My adaptation is here. HTML:

<body>
  <section class="portfolio-container">
        <div id="menu-picker">
            <a href="#" data-id="1" class="menu-text">Portfolio 1</a>
            <a href="#" data-id="2" class="menu-text">Portfolio 2</a>
            <a href="#" data-id="3" class="menu-text">Portfolio 3</a>
        </div><!--/menu-picker-->
        <div id="pages">
         <div class="mydivshow portfolio1">
           <p>1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
         </div><!--/portfolio-div1-->
         <div class="mydivhide portfolio2">
           <p>2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
         </div><!--/portfolio-div2-->
         <div class="mydivhide portfolio3">
           <p>3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
         </div><!--/portfolio-div3-->
       </div><!--/pages-->
  </section><!--/portfolio-container-->
</body>

jQuery:

$(document).ready(function() {
    var buttons = $("#menu-picker").find("a");
    $("buttons").click(function() {
       var id = $(this).attribute("data-id"); 
       $("#pages div").hide();
       $(".portfolio" + id).show();
    });
});

I've changed up class and data-id names, so I can make it fit to the rest of the lay-out I've been building here. The reason I'm creating the buttons variable, is because there are more hyperlinks in the rest of the document.

What needs to happen is: When you click the link "Portfolio 1", the div with the class "portfolio1" needs to be shown, and the other two portfolio's need to be hidden. I just don't quite see what I'm doing wrong right now.

Thanks in advance!

Upvotes: 1

Views: 174

Answers (2)

Pranav C Balan
Pranav C Balan

Reputation: 115222

There is no attribute() method in jQuery, use attr() or data() method to get data-* attribute value.

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

One more bug, the $("buttons") would try to select tag element with name buttons, so nothing get selected. To make it working update the selector with the cached jQuery object. 

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


$(document).ready(function() {
  var $buttons = $("#menu-picker a");
  $buttons.click(function() {
    var id = $(this).attr("data-id");
    $("#pages div").hide();
    $(".portfolio" + id).show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <section class="portfolio-container">
    <div id="menu-picker">
      <a href="#" data-id="1" class="menu-text">Portfolio 1</a>
      <a href="#" data-id="2" class="menu-text">Portfolio 2</a>
      <a href="#" data-id="3" class="menu-text">Portfolio 3</a>
    </div>
    <!--/menu-picker-->
    <div id="pages">
      <div class="mydivshow portfolio1">
        <p>1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div1-->
      <div class="mydivhide portfolio2">
        <p>2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div2-->
      <div class="mydivhide portfolio3">
        <p>3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div3-->
    </div>
    <!--/pages-->
  </section>
  <!--/portfolio-container-->
</body>

UPDATE 1: Better way with a cached jQuery object.

// cache the divs
var $divs = $("#pages > div");
// bind the click event handler
$("#menu-picker a").click(function() {
  // hide all div, filter out the div to show and show it
  $divs.hide().filter(".portfolio" + $(this).data('id')).show();
});


var $divs = $("#pages > div");
$("#menu-picker a").click(function() {
  $divs.hide().filter(".portfolio" + $(this).data('id')).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <section class="portfolio-container">
    <div id="menu-picker">
      <a href="#" data-id="1" class="menu-text">Portfolio 1</a>
      <a href="#" data-id="2" class="menu-text">Portfolio 2</a>
      <a href="#" data-id="3" class="menu-text">Portfolio 3</a>
    </div>
    <!--/menu-picker-->
    <div id="pages">
      <div class="mydivshow portfolio1">
        <p>1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div1-->
      <div class="mydivhide portfolio2">
        <p>2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div2-->
      <div class="mydivhide portfolio3">
        <p>3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div3-->
    </div>
    <!--/pages-->
  </section>
  <!--/portfolio-container-->
</body>

UPDATE 2: To show only the first element either set the display : hidden to the remaining(except first) or manually trigger the click event.

With CSS :

#pages > div:not(:first-child){
   display:none;
}

/*or*/
#pages > div:nth-child(n+2){
   display:none;
}


var $divs = $("#pages > div");
$("#menu-picker a").click(function() {
  $divs.hide().filter(".portfolio" + $(this).data('id')).show();
});
#pages > div:nth-child(n+2) {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <section class="portfolio-container">
    <div id="menu-picker">
      <a href="#" data-id="1" class="menu-text">Portfolio 1</a>
      <a href="#" data-id="2" class="menu-text">Portfolio 2</a>
      <a href="#" data-id="3" class="menu-text">Portfolio 3</a>
    </div>
    <!--/menu-picker-->
    <div id="pages">
      <div class="mydivshow portfolio1">
        <p>1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div1-->
      <div class="mydivhide portfolio2">
        <p>2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div2-->
      <div class="mydivhide portfolio3">
        <p>3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div3-->
    </div>
    <!--/pages-->
  </section>
  <!--/portfolio-container-->
</body>

With jQuery : 

$("#menu-picker a").click(/* clickhandler */).first().click();


var $divs = $("#pages > div");
$("#menu-picker a").click(function() {
  $divs.hide().filter(".portfolio" + $(this).data('id')).show();
}).first().click();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <section class="portfolio-container">
    <div id="menu-picker">
      <a href="#" data-id="1" class="menu-text">Portfolio 1</a>
      <a href="#" data-id="2" class="menu-text">Portfolio 2</a>
      <a href="#" data-id="3" class="menu-text">Portfolio 3</a>
    </div>
    <!--/menu-picker-->
    <div id="pages">
      <div class="mydivshow portfolio1">
        <p>1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div1-->
      <div class="mydivhide portfolio2">
        <p>2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div2-->
      <div class="mydivhide portfolio3">
        <p>3. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu,
          pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.</p>
      </div>
      <!--/portfolio-div3-->
    </div>
    <!--/pages-->
  </section>
  <!--/portfolio-container-->
</body>

Upvotes: 5

Mitya
Mitya

Reputation: 34556

There's two problems.

Firstly, you call $('buttons') when you mean the variable, so $(buttons).

Secondly, as noted elsewhere, jQuery has no method attribute(). This would have shown up as an error in the error console. What it does have, is attr().

You can also simplify/optimise your code - not least to harness the concept of event delegation.

$('#menu-picker').on('click', 'a', function() {
    $(".portfolio"+$(this).data('id')).show().siblings('.portfolio').hide();
});

The event is now bound to one element, not multiple - and the trigger of that event is evaluated at runtime. (This is good general practice, for other reasons outside the scope of this question.)

Upvotes: 2

Related Questions