CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Steve
Steve

Reputation: 8293

Dynamic jQuery content loading

Im adding staff members to my CMS but having trouble loading members as i think my code is quite messy. Is it possible to remove "li a.job-desc" & "li a.job-desc1" etc and have one global variable that works for all staff members. Once clicked on each staff member their own description should open and other members close

Fiddle here: http://jsfiddle.net/zangief007/BSN5u/14/

HTML: 

      <ul>
        <li><a href="#" class="job-desc1"><img src="http://placehold.it/150x150" alt="staff1" width="191" height="191"></a></li>
        <li>Jon doe</li>
        <li>09 548 5554</li>
        <li>[email protected]</li>
      </ul>

       <p class="description1">Joe Doe dolor sit amet, consectetur adipisicing elit. Officiis, tempora, libero, ipsa maxime facere ullam harum ad iusto laborum minima magni officia provident aut obcaecati quaerat fugiat labore qui aliquam.</p>

       <ul>
           <li><a href="#" class="job-desc2"><img src="http://placehold.it/150x150" alt="staff1" width="191" height="191"></a></li>
        <li>Jenny Hill</li>
        <li>09 548 5554</li>
        <li>[email protected]</li>

      </ul>

      <p class="description2">Jenny Hill dolor sit amet, consectetur adipisicing elit. Officiis, tempora, libero, ipsa maxime facere ullam harum ad iusto laborum minima magni officia provident aut obcaecati quaerat fugiat labore qui aliquam.</p>


         <ul>
             <li><a href="#" class="job-desc3"><img src="http://placehold.it/150x150" alt="staff1" width="191" height="191"></a></li>
        <li>Peter Small</li>
        <li>09 548 5554</li>
        <li>[email protected]</li>

      </ul>

      <p class="description3">Peter Small dolor sit amet, consectetur adipisicing elit. Officiis, tempora, libero, ipsa maxime facere ullam harum ad iusto laborum minima magni officia provident aut obcaecati quaerat fugiat labore qui aliquam.</p>

  </div>

JS: 

 $( "li a.job-desc" ).click(function() {
          $( "p.description" ).fadeToggle( "slow", "linear" );
});

$( "li a.job-desc1" ).click(function() {
          $( "p.description1" ).fadeToggle( "slow", "linear" );
});

$( "li a.job-desc2" ).click(function() {
              $( "p.description2" ).fadeToggle( "slow", "linear" );
});
</script>

Upvotes: 0

Views: 58

Answers (3)

T J
T J

Reputation: 43156

CSS classes are used to group a set of elements. Adding classes like class1, class2 etc for each element does not make sense.

(For accessing particular element, you can use an id instead, which will be way faster compared to accessing it using class)

In this case, you can give a common class job-desc for <a> and description for <p> then you can use the following script to show respective descriptions.

$("li a.job-desc").click(function () {
  $(this).closest('ul').next("p.description").fadeToggle("slow", "linear");
});

Demo

If you want to close the other descriptions, you can use the :visible selector as follows:

 $("li a.job-desc").click(function () {
  var $desc = $(this).closest("ul").next("p.description").fadeToggle("slow", "linear");
  $('p.description:visible').not($desc).hide();
});

Demo

Upvotes: 3

Thorbj&#248;rn Kappel Hansen
Thorbj&#248;rn Kappel Hansen

Reputation: 1297

It gets a little messy when link and description aren't contained within a separate container, but this should fade in the associated description and fade out all other descriptions.

$("li a.job-desc").click(function() {
   // first find the description associated with the clicked link
   var description = $(this).closest("ul").nextAll("p.description").first();
   description.siblings("p.description").fadeOut();
   description.fadeIn();
});

Upvotes: 0

Sudhanshu Saxena
Sudhanshu Saxena

Reputation: 1199

use each iterator

$("li a").each(function(index,ele){
  $(this).click (function(){
    $(this).closest("ul").next("p.description").fadeToggle( "slow", "linear" );
  });
});

Upvotes: 0

Related Questions