Optimization jquery code

Question

How do I optimize the code below? In less lines.

jQuery(document).ready(function(){
jQuery(".a1").hide();
jQuery(".a").click(function(){
    jQuery(".a1").toggle();
});

jQuery(document).ready(function(){
    jQuery(".b1").hide();
    jQuery(".b").click(function(){
        jQuery(".b1").toggle();
    });
    ...

...

Edit. Add my Html code.

<ul class="bg">
<li class="a">Text</li>
<li class="a1"><a href="#">Text</a></li>
<li class="a1"><a href="#">Text</a></li>
</ul>

<ul class="bg">
<li class="b">Text</li>
<li class="b1"><a href="#">Text</a></li>
<li class="b1"><a href="#">Text</a></li>
</ul>

Thanks for answers.

I'm voting to close this question as off-topic because it belongs on code-review. — Jamie Cockburn
– Jamie Cockburn, Commented Apr 8, 2015 at 11:17

Nishit Maheta · Accepted Answer · 2015-04-08 11:37:25Z

1

use below code

DEMO

 jQuery(document).ready(function(){
   jQuery(".bg").find('li:not(:first)').hide();  // hide all li inside .bg expat  expat first.
   jQuery(".bg").find('li:first').click(function(){  // click event on first li
     $(this).nextAll('li').toggle(); // toggle other li expat first
   });
 });

edited Apr 8, 2015 at 11:37

answered Apr 8, 2015 at 11:14

Nishit Maheta

6,0413 gold badges19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bhushan Kawadkar · Accepted Answer · 2015-04-08 11:50:07Z

1

Try this : You can make use of siblings() to toggle lis

$(function(){
 $('.bg').find('li:first').siblings('li').hide();
  $('.bg').find('li:first').click(function(){
    $(this).siblings('li').toggle();
 });
});

JSFiddle Demo

edited Apr 8, 2015 at 11:50

answered Apr 8, 2015 at 11:46

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

empiric · Accepted Answer · 2015-04-08 11:21:05Z

0

You can try something like this:

jQuery(document).ready(function () {

    jQuery(".bg").find('li:has(a)').hide(); //hide all list-elements 
                                            //containing an anchor element

    jQuery(".bg > li:first-child").click(function () { //trigger click
                                                       // on the first list-element
        $(this).siblings('li').toggle(); //toggle all other list-elements
    });

});

It depends strongly on your provided html-markup, as it checks if there are a-tags inside the list-elements, which should be shown on click. But you can expand your existing markup with no need to change something or add additional data to it.

Reference

edited Apr 8, 2015 at 11:21

answered Apr 8, 2015 at 11:15

empiric

7,8767 gold badges40 silver badges51 bronze badges

1 Comment

empiric Over a year ago

@user4758595 please have a look at your console: TypeError: $ is not a function, have a look at this article

SteveK · Accepted Answer · 2015-04-08 11:10:02Z

0

There's no need for more than one jQuery(document).ready(function() { call.

jQuery(document).ready(function() {
  jQuery(".a1, .b1").hide();
  jQuery(".a").click(function() {
    jQuery(".a1").toggle();
  });
  jQuery(".b").click(function() {
    jQuery(".b1").toggle();
  });
});

edited Apr 8, 2015 at 11:10

answered Apr 8, 2015 at 11:08

SteveK

9955 silver badges17 bronze badges

2 Comments

Nishit Maheta Over a year ago

click event is not on a1 b1 its .a .b.

charlietfl Over a year ago

repeat same pattern 20 times and you have to repeat code blocks 20 times. This solution isn't much of an improvement from OP code

Zafar Ahmad · Accepted Answer · 2015-04-08 11:49:09Z

0

You can do something like this:

<script>
$(function(){
 $('ul.bg li:first').siblings().hide();
 $('ul.bg li:first').on("click", function(){
  $(this).siblings().toggle();
 })
})
</script>

Try this and let me know if that helps you

edited Apr 8, 2015 at 11:49

answered Apr 8, 2015 at 11:36

Zafar Ahmad

4282 silver badges13 bronze badges

3 Comments

Nishit Maheta Over a year ago

what if a and b is up tp a50,b50 ? how to hide all that element?

Zafar Ahmad Over a year ago

Try this - $('ul.bg li:first').siblings().hide(); if that works

Zafar Ahmad Over a year ago

if that works, use the same selector $('ul.bg li:first').click()

Collectives™ on Stack Overflow

Optimization jquery code

5 Answers 5

Comments

Comments

1 Comment

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related