javascript – Show and hide images list with jquery

A list of images displays 12 images, the first 6 images are displayed and a button when clicked on it displays 6 additional images, how can I use jquery?
I tried the code below but it did not work.

CSS:

.panel li: nth child (n + 7) {
display: none;
}

.penel-open li: nth child (n + 7) {
display: inline-block;
}

jquery:

$ (& # 39; .new button & # 39;). click (function () {
$ (& # 39 ;. news & # 39;). addclass ("open panel");
});

$ (& # 39; .new button & # 39;). click (function () {
$ (& # 39; .news & # 39;). toggleClass ("open panel");
});

HTML:

   

What's up?

  1. Shop
    vignette1
    Strange blouse
    by R $ 129.90
  2. Shop
    vignette1
    Blue shirt
    by R $ 49.90
  3. Shop
    vignette1
    Green blouse
    by R $ 59.90
  4. Shop
    vignette1
    Embroidery jacket
    by R $ 129.90
  5. Shop
    vignette1
    Physica Azul
    by R $ 39.90
  6. Shop
    vignette1
    Pink dress
    by R $ 49.90
  7. Shop
    vignette1
    Pink dress
    by R $ 49.90
  8. Shop
    vignette1
    Pink dress
    by R $ 49.90
  9. Shop
    vignette1
    Pink dress
    by R $ 49.90
  10. Shop
    vignette1
    Pink dress
    by R $ 49.90
  11. Shop
    vignette1
    Pink dress
    by R $ 49.90
  12. Shop
    vignette1
    Pink dress
    by R $ 49.90