Danny Danny - 3 months ago 7
CSS Question

grid/list view product display issue

list view left/ gridview right

Hi. I'm trying to make a list view and a grid view to my site but I don't know how to make specific items switch positions as the images do... When I press grid view button, the images display in grid, but the badges and the text remain the same as in list mode. I made sure I had put them all in the same div... but still doesn't work. Any suggestion please?



$('button').on('click', function(e) {
if ($(this).hasClass('grid')) {
$('#container ul').removeClass('list').addClass('grid');
} else if ($(this).hasClass('list')) {
$('#container ul').removeClass('grid').addClass('list');
}
});

.list_view {
list-style-type: none;
top: 600px;
position: absolute;
left: 244px;
height: 1100px;
overflow: auto;
width: 91%;
}
.list_view li {
margin-bottom: 100px;
padding-left: 0;
}
#container ul {
list-style-type: none;
}
#container .buttons {
left: 850px;
position: absolute;
z-index: 1000;
top: 550px;
}
#container .list li {
width: 100%;
}
#container .grid li {
float: left;
height: 50px;
padding-left: 57px;
padding-bottom: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="buttons">
<button class="grid">Grid View</button>
<button class="list">List View</button>
</div>

<ul class="list_view">
<li>
<div class="item1">
<img src="images\homepage-960px_26.jpg" alt="Shoe 1" />
<div class="switch">
<ul class="main_icons">
<li><i class="fa fa-eye" aria-hidden="true"></i>
</li>
<li><i class="fa fa-star-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-share-square-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
</li>
</ul>
<p class="even_odd">Even&Odd</p>
</div>
</div>
</li>
<li>
<div class="item2">
<img src="images\Item 2.png" alt="Shoe 2" />
<p class="on_sale">ON SALE!</p>
<div class="switch" id="switch2">
<ul class="main_icons" id="main_icons2">
<li><i class="fa fa-eye" aria-hidden="true"></i>
</li>
<li><i class="fa fa-star-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-share-square-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
</li>
</ul>
<p class="even_odd">Even&Odd</p>
</div>
</div>
</li>
<li>
<div class="item3">
<img src="images\homepage-960px_29.jpg" alt="Shoe 3" />
<div class="switch" id="switch7">
<ul class="main_icons" id="main_icons7">
<li><i class="fa fa-eye" aria-hidden="true"></i>
</li>
<li><i class="fa fa-star-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-share-square-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
</li>
</ul>
<p class="even_odd">Buffalo Decolettè</p>
</div>
</div>
</li>
<li>
<div class="item4">
<img src="images\homepage-960px_33.jpg" alt="Shoe 4" />
<div class="switch" id="switch3">
<ul class="main_icons" id="main_icons3">
<li><i class="fa fa-eye" aria-hidden="true"></i>
</li>
<li><i class="fa fa-star-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-share-square-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
</li>
</ul>
<p class="even_odd">Even&Odd</p>
</div>
</div>
</li>
<li>
<div class="item5">
<img src="images\homepage-960px_34.jpg" alt="Shoe 5" />
<div class="switch" id="switch4">
<ul class="main_icons" id="main_icons4">
<li><i class="fa fa-eye" aria-hidden="true"></i>
</li>
<li><i class="fa fa-star-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-share-square-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
</li>
</ul>
<p class="even_odd">Even&Odd</p>
</div>
</div>
</li>
<li>
<div class="item6">
<img src="images\shoe_photo3.png" alt="Shoe 6" />
<p class="on_sale" id="out_stock">OUT OF
<br/>&nbsp STOCK</p>
<div class="switch" id="switch8">
<ul class="main_icons" id="main_icons8">
<li><i class="fa fa-eye" aria-hidden="true"></i>
</li>
<li><i class="fa fa-star-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-share-square-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
</li>
</ul>
<p class="even_odd">Buffalo Decolettè</p>
</div>
</div>
</li>
<li>
<div class="item7">
<img src="images\homepage-960px_26.jpg" alt="Shoe 7" />
<div class="switch" id="switch5">
<ul class="main_icons" id="main_icons5">
<li><i class="fa fa-eye" aria-hidden="true"></i>
</li>
<li><i class="fa fa-star-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-share-square-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
</li>
</ul>
<p class="even_odd">Even&Odd</p>
</div>
</div>
</li>
<li>
<div class="item8">
<img src="images\Item 2.png" alt="Shoe 8" />
<p class="on_sale" id="on_sale2">ON SALE!</p>
<div class="switch" id="switch6">
<ul class="main_icons" id="main_icons6">
<li><i class="fa fa-eye" aria-hidden="true"></i>
</li>
<li><i class="fa fa-star-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-share-square-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
</li>
</ul>
<p class="even_odd">Even&Odd</p>
</div>
</div>
</li>
<li>
<div class="item9">
<img src="images\homepage-960px_29.jpg" alt="Shoe 3" />
<div class="switch" id="switch9">
<ul class="main_icons" id="main_icons9">
<li><i class="fa fa-eye" aria-hidden="true"></i>
</li>
<li><i class="fa fa-star-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-share-square-o" aria-hidden="true"></i>
</li>
<li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
</li>
</ul>
<p class="even_odd">Buffalo Decolettè</p>
</div>
</div>
</li>
</ul>
</div>




Answer

simple... the class name for ul to add/remove should be list_view/grid_view like below

 $('#container ul').removeClass('list_view').addClass('grid_view');

$('button').on('click', function(e) {
  if ($(this).hasClass('grid')) {
    $('#container ul').removeClass('list_view').addClass('grid_view');
  } else if ($(this).hasClass('list')) {
    $('#container ul').removeClass('grid_view').addClass('list_view');
  }
});
.list_view {
  list-style-type: none;
  top: 600px;
  position: absolute;
  left: 244px;
  height: 1100px;
  overflow: auto;
  width: 91%;
}
.list_view li {
  margin-bottom: 100px;
  padding-left: 0;
}
#container ul {
  list-style-type: none;
}
#container .buttons {
  left: 850px;
  position: absolute;
  z-index: 1000;
  top: 550px;
}
#container .list li {
  width: 100%;
}
#container .grid li {
  float: left;
  height: 50px;
  padding-left: 57px;
  padding-bottom: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="buttons">
    <button class="grid">Grid View</button>
    <button class="list">List View</button>
  </div>

  <ul class="list_view">
    <li>
      <div class="item1">
        <img src="images\homepage-960px_26.jpg" alt="Shoe 1" />
        <div class="switch">
          <ul class="main_icons">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Even&Odd</p>
        </div>
      </div>
    </li>
    <li>
      <div class="item2">
        <img src="images\Item 2.png" alt="Shoe 2" />
        <p class="on_sale">ON SALE!</p>
        <div class="switch" id="switch2">
          <ul class="main_icons" id="main_icons2">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Even&Odd</p>
        </div>
      </div>
    </li>
    <li>
      <div class="item3">
        <img src="images\homepage-960px_29.jpg" alt="Shoe 3" />
        <div class="switch" id="switch7">
          <ul class="main_icons" id="main_icons7">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Buffalo Decolettè</p>
        </div>
      </div>
    </li>
    <li>
      <div class="item4">
        <img src="images\homepage-960px_33.jpg" alt="Shoe 4" />
        <div class="switch" id="switch3">
          <ul class="main_icons" id="main_icons3">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Even&Odd</p>
        </div>
      </div>
    </li>
    <li>
      <div class="item5">
        <img src="images\homepage-960px_34.jpg" alt="Shoe 5" />
        <div class="switch" id="switch4">
          <ul class="main_icons" id="main_icons4">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Even&Odd</p>
        </div>
      </div>
    </li>
    <li>
      <div class="item6">
        <img src="images\shoe_photo3.png" alt="Shoe 6" />
        <p class="on_sale" id="out_stock">OUT OF
          <br/>&nbsp STOCK</p>
        <div class="switch" id="switch8">
          <ul class="main_icons" id="main_icons8">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Buffalo Decolettè</p>
        </div>
      </div>
    </li>
    <li>
      <div class="item7">
        <img src="images\homepage-960px_26.jpg" alt="Shoe 7" />
        <div class="switch" id="switch5">
          <ul class="main_icons" id="main_icons5">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Even&Odd</p>
        </div>
      </div>
    </li>
    <li>
      <div class="item8">
        <img src="images\Item 2.png" alt="Shoe 8" />
        <p class="on_sale" id="on_sale2">ON SALE!</p>
        <div class="switch" id="switch6">
          <ul class="main_icons" id="main_icons6">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Even&Odd</p>
        </div>
      </div>
    </li>
    <li>
      <div class="item9">
        <img src="images\homepage-960px_29.jpg" alt="Shoe 3" />
        <div class="switch" id="switch9">
          <ul class="main_icons" id="main_icons9">
            <li><i class="fa fa-eye" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-star-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-share-square-o" aria-hidden="true"></i>
            </li>
            <li><i class="fa fa-shopping-cart" aria-hidden="true"></i>
            </li>
          </ul>
          <p class="even_odd">Buffalo Decolettè</p>
        </div>
      </div>
    </li>
  </ul>
</div>