JSFiddle - React, Tailwind, and code Playground

HTML

<div style="padding:15px"><button>Grid view</button></div>


<ul id="itemList">
    <li>
         <h3 class="title">Item # 1</h3>

        <div class="details">Detals # 1</div>
    </li>
    <li>
         <h3 class="title">Item # 2</h3>

        <div class="details">Detals # 2</div>
    </li>
    <li>
         <h3 class="title">Item # 3</h3>

        <div class="details">Detals # 3</div>
    </li>
    <li>
         <h3 class="title">Item # 4</h3>

        <div class="details">Detals # 4</div>
    </li>
    <li>
         <h3 class="title">Item # 5</h3>

        <div class="details">Detals # 5</div>
    </li>
    <li>
         <h3 class="title">Item # 6</h3>

        <div class="details">Detals # 6</div>
    </li>
    <li>
         <h3 class="title">Item # 7</h3>

        <div class="details">Detals # 7</div>
    </li>
    <li>
         <h3 class="title">Item # 8</h3>

        <div class="details">Detals # 8</div>
    </li>
    <li>
         <h3 class="title">Item # 9</h3>

        <div class="details">Detals # 9</div>
    </li>
    <li>
         <h3 class="title">Item # 10</h3>

        <div class="details">Detals # 10</div>
    </li>
</ul>

CSS

li{ border: 2px solid #CCC}
.grid li{ float:left; width:30%;margin-right:5px}

.grid .details{display:none}

JavaScript

$('button').click(function(){
    var txt=$(this).text();
    txt= txt=='Grid view'? 'List view' : 'Grid view';
    $(this).text( txt);
    $('#itemList').toggleClass('grid')
})