Jquery Div Limit

<div class="a">
      <div class="b"><img class="img"></div>
      <div class="b"><img class="img"></div>
      <div class="b"><img class="img"></div>
      <div class="b"><img class="img"></div>
     <div class="b"><img class="img"></div>
     <div class="b"><img class="img"></div>
     <div class="b"><img class="img"></div>
     <div class="b"><img class="img"></div>
     <div class="b"><img class="img"></div>
    <button class="goster">Hepsini Göster></button>
</div>

Öncelikle herkese merhaba, şu yapıya benzer bir div yapısı mevcut. İstediğim b class ına sahip divlerin ilk 3 tanesi gösterip geri kalanını gizlemek ve hepsini göster butonuna tıklanıldığında geri kalanının gösterilerek button yazısının Daha Az Göster olarak değiştirilmesi tekrar tıklanıldığında ilk 3'lüye dönmesi ve button yazısının Hepsini Göster olarak tekrar değişmesi bir nevi toggle kullanımı.Yardımcı olabilirseniz çok sevinirim div sayısı çok olunca mobil de çirkin bir görüntü oluşuyor bunun önüne geçmem gerekli.

Edit:
Sorun halledildi böyle birşey arayan olursa diye buraya linkini bırakıyorum.
​https://stackoverflow.com/questions/...nd-toggle-show​​​

https://getbootstrap.com/docs/4.3/components/collapse/

Bir inceleyin

Merhaba hocam sanırım buradan yararlanabilirsiniz.

http://jsfiddle.net/cse_tushar/6FzSb/

Hocam tam olarak istediğim bu fakat iki buton yerine tek buton verip tıklamaya göre text leri değiştirebilir miyim ? Yani tek butonda Hepsini göster/Daha az göster gibi.