CODEWITHSUNDEEP
jqueryhtml
abcid d
abcid d

Reputation: 2953

Writing Dynamic JQuery

I am looking for a way to write dynamic codes in Jquery.

Please take a look at these codes below and here is its jsfiddle

Everything works as expected, but Jquery codes repeats and kind of long! Is there any way to turn this Jquery to dymamic one.

Thanks!

HTML

<div class="tabs" id="tab-part1">Part 1</div>
<div class="tabs" id="tab-part2">Part 2</div>
<div class="tabs" id="tab-part3">Part 3</div>
<div class="tab-parts">
<div id="part1">
This is part 1
</div>
<div id="part2">
This is part 2
</div>
<div id="part3">
This is part3
</div>
</div>

JS

 $(function () {
     $('#tab-part1').click((event) => {
        $(this).find('.tab-parts #part2, .tab-parts #part3').hide();
        $(this).find('.tab-parts #part1').show();
     });
     $('#tab-part2').click((event) => {
        $(this).find('.tab-parts #part1, .tab-parts #part3').hide();
        $(this).find('.tab-parts #part2').show();

     });
     $('#tab-part3').click((event) => {
        $(this).find('.tab-parts #part1, .tab-parts #part2').hide();
        $(this).find('.tab-parts #part3').show();
     });
 });

Upvotes: 0

Views: 72

Answers (2)

CrayonViolent
CrayonViolent

Reputation: 32537

Here's my take, based on not changing your html structure. This could be done better with a change to html structure.

http://jsfiddle.net/Ldfqhm1k/

HTML

<div class="tabs" id="tab-part1">Part 1</div>
<div class="tabs" id="tab-part2">Part 2</div>
<div class="tabs" id="tab-part3">Part 3</div>
<div class="tab-parts">
<div id="part1">
This is part 1
</div>
<div id="part2">
This is part 2
</div>
<div id="part3">
This is part 3
</div>
</div>

CSS

.tabs {
  font-size: 20px;
  font-weight: bold;
  margin-right: 60px;
  float: left;
}

#part2, #part3 {
  display: none
}
.tab-parts {
  width: 100%;
  float:left;
  margin-top: 20px
}

JS

 $(function () {
     $('div[id^="tab-part"]').on('click',function(e){
        var part = $(this).attr('id').split('-')[1];
        $('.tab-parts [id^="part"]').hide();
        $('.tab-parts #'+part).show();
     });
 });

Upvotes: 0

kasperite
kasperite

Reputation: 2478

How does this look?

     $(function () {
         $(".tabs").click(function(e) {
           var target = $(this).data("target");
           $("#" + target).show();
           $(".tab-parts").children().not("#" + target).hide();
         });
     });
.tabs {
  font-size: 20px;
  font-weight: bold;
  margin-right: 60px;
  float: left;
}

#part2, #part3 {
  display: none
}
.tab-parts {
  width: 100%;
  float:left;
  margin-top: 20px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs" data-target="part1">Part 1</div>
<div class="tabs" data-target="part2">Part 2</div>
<div class="tabs" data-target="part3">Part 3</div>
<div class="tab-parts">
<div id="part1">
This is part 1
</div>
<div id="part2">
This is part 2
</div>
<div id="part3">
This is part3
</div>
</div>

Upvotes: 1

Related Questions