jQueryでdiv要素じゃなくてclass名に指定したい

Question

  <button>ボタン</button>

  <div class="ac_contents">
  <div class="glaf01"><p class="result">80%</p></div>
  <div class="glaf02"><p class="result">50%</p></div>
  <div class="glaf03"><p class="result">33%</p></div>
</div>

  div {
      opacity: 0;
      transition: .7s;
    }

    div.show {
      opacity: 1;
    }

    $(function() {

      // ボタンをクリックしたら発動
      $('button').click(function() {

        // class'show'をdiv要素に追加
        $('div').addClass('show');

      });
    });

####　作成したもの
[button]要素を押すと　div 要素が表示される仕組み

####　解決したいこと
このままだと全てのdiv要素（ここに記述のないdiv要素）が[button]要素を押すと同じ動作になってしまうので与えたクラス名の
.ac_contents　のdiv要素にのみ、ボタンを押したら表示されるようにしたいのですがうまくいきません。

####　試したこと
おそらくjQueryの記述かと思うのですが、div の部分をクラス名に変えると動作がしなくなってしまいました。
cssの記述もdiv からクラス名に変えましたがうまくいきませんでした。

詳しい方ご教授いただけますと幸いです。

####　補足
.glaf01
.glaf02
.glaf03
のcssは省略しています。

Comments

[m.ts10806]

＞cssの記述もdiv からクラス名に変えましたがうまくいきませんでした。

ここを提示されないことには「どう書いてどううまくいかなかったか」が伝わらないので、追記してください。
答えだけもらっても今後には活きない内容です。
とりあえず「基本を理解すべき」という観点で回答はしました。

Answer 1

jQueryの問題ではなく、JavaScriptの問題でもなく、
CSSのセレクタの基本に沿うべき内容です。

★CSSの基本
■セレクタの種類

CSS関係の質問でも、ここをおさえられてなくて質問する人結構多いですよ。