Plynulý přechod mezi dvěma divy

Dobrý den, mám na stránce tři divy ve kterých je nějaký obsah a v každém je button "další". Potřeboval bych, aby po kliknutí na tento button plynule skryl první div a na jeho místě zobrazil druhý. Po kliknutí na druhé tlačítko se stane to samé akorát s třetím divem. Potřeboval bych, aby se u zobrazeného divu po kliknutí na tlačítko plynule zapnula funkce hidden a druhého divu aby se tato funkce zase pomalu vypnula. Nemusí se jednat vyloženě o funkci hidden, ale obsah prvního divu nesmí překážet tomu druhému.

<div id="A">
Obsah1
<button id="dalsi"> Další </button>
</div>

<div id="B" hidden="">
Obsah2
<button id="dalsi"> Další </button>
</div>

<div id="C" hidden="">
Obsah3
<button id="dalsi"> Další </button>
</div>