All geek questions in one place

In mobile mode, we want to display the bottom of the div of each div

In the desktop view, the output is correct, but in the mobile view we want to generate each div, has its own description.

now my problem is that the description is displayed after all four elements, and we want to display the bottom of each div in mobile mode.

Anyone will help me using any jQuery. I am trying to use offset and height using jQuery, but this does not work.

$(".trust-datail").hide();
$(".trust-wrap").each(function (i) {
    $(this).attr('id', +i);
});

$(".trust-datail").each(function (i) {
    $(this).addClass("tab_" + i);
});

$(".trust-wrap").click(function () {
    $(".trust-datail").slideUp();
    var id = $(this).attr('id');

    if ($(".tab_" + id).is(':visible')) {
        $(".tab_" + id).slideUp();
    }
    else {
        $(".tab_" + id).slideDown();
    }
});
$(".close-new").click(function () {
    $(this).parent(".trust-datail").slideUp();
});
.trust-wrap {
  border-radius: 5px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  text-align: center;
  transition: all 0.2s ease 0s;
}
.trust-wrap img {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin:0 auto;
}
.trust-wrap h4 {
  font-weight: bold;
  margin: 25px 0;
  font-size:15px;
}
.trust-datail {
  background: #000;
  border-radius: 5px;
  margin: auto auto 50px;
  padding: 20px;
  position: relative;
  width: 100%;
}
.close-new {
  cursor: pointer;
  position: absolute;
  right: 20px;
  text-align: right;
}
.trust-datail h5 {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 15px;
}
.trust-datail p {
  color: #fff;
  margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="member_wrap">
    <div class="member_box">
      <div class="row">
        <div class="col-sm-3 chand">
          <div class="trust-wrap" id="8">
            <img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive">
            <h4>Lorem Ipsum1</h4>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="col-sm-3 chand">
          <div class="trust-wrap" id="9">
            <img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive">
            <h4>Lorem Ipsum2</h4>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="col-sm-3 chand">
          <div class="trust-wrap" id="10">
            <img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive">
            <h4>Lorem Ipsum3</h4>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="col-sm-3 chand">
          <div class="trust-wrap" id="11">
            <img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive">
            <h4>Lorem Ipsum4</h4>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
  </div>
    <div class="trust-datail tab_8" style="display: none;">
      <div class="close-new">
          <img src="images/close-new.png">
      </div>
      <h5>Lorem Ipsum1</h5>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
    </div>
    <div class="trust-datail tab_9" style="display: none;">
      <div class="close-new">
          <img src="images/close-new.png">
      </div>
      <h5>Lorem Ipsum2</h5>
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
    </div>
    <div class="trust-datail tab_10" style="display: none;">
      <div class="close-new">
          <img src="images/close-new.png">
      </div>
      <h5>Lorem Ipsum3</h5>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
    </div>
    <div class="trust-datail tab_11" style="display: none;">
      <div class="close-new">
          <img src="images/close-new.png">
      </div>
      <h5>Lorem Ipsum4</h5>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
    </div>
  </div>
</div>
Run code
+4
source share
2 answers

Updated answer for you

This will work for you.

I made a function for you and named it in $(window).loadand $(window).resize-

var cloneFun = function() {
  if ($(window).width() <= 420) {
    $(".trust-datail").each(function(i) {
      var clonId = "#" + i,
        clon = $(this).clone();
      $(clonId).find('.clearfix').before(clon);
      $(this).addClass('mob-none');
    });
  } else {

    $(".trust-datail").removeClass('mob-none');
  }
};

$(window).load(function() {
  cloneFun();
});

$(window).resize(function() {
  cloneFun();
});

, 420px, div .trust-wrap

.mob-none, .

$(".trust-datail").hide();
$(".trust-wrap").each(function(i) {
  $(this).attr('id', +i);
});

$(".trust-datail").each(function(i) {
  $(this).addClass("tab_" + i);
});


$(".trust-wrap").click(function() {
  $(".trust-datail").slideUp();
  var id = $(this).attr('id');

  if ($(".tab_" + id).is(':visible')) {
    $(".tab_" + id).slideUp();
  } else {
    $(".tab_" + id).slideDown();
  }
});
$(".close-new").click(function() {
  $(this).parent(".trust-datail").slideUp();
});

var cloneFun = function() {
  if ($(window).width() <= 420) {
    $(".trust-datail").each(function(i) {
      var clonId = "#" + i,
        clon = $(this).clone();
      $(clonId).find('.clearfix').before(clon);
      $(this).addClass('mob-none');
    });
  } else {

    $(".trust-datail").removeClass('mob-none');
  }
};

$(window).load(function() {
  cloneFun();
});

$(window).resize(function() {
  cloneFun();
});
.trust-wrap {
  border-radius: 5px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  text-align: center;
  transition: all 0.2s ease 0s;
}

.trust-wrap img {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  margin: 0 auto;
}

.trust-wrap h4 {
  font-weight: bold;
  margin: 25px 0;
  font-size: 15px;
}

.trust-datail {
  background: #000;
  border-radius: 5px;
  margin: auto auto 50px;
  padding: 20px;
  position: relative;
  width: 100%;
}

.close-new {
  cursor: pointer;
  position: absolute;
  right: 20px;
  text-align: right;
}

.trust-datail h5 {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 15px;
}

.trust-datail p {
  color: #fff;
  margin: 0;
}

.mob-none {
  display: none !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="member_wrap">
    <div class="member_box">
      <div class="row">
        <div class="col-sm-3 chand">
          <div class="trust-wrap" id="8">
            <img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive">
            <h4>Lorem Ipsum1</h4>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="col-sm-3 chand">
          <div class="trust-wrap" id="9">
            <img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive">
            <h4>Lorem Ipsum2</h4>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="col-sm-3 chand">
          <div class="trust-wrap" id="10">
            <img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive">
            <h4>Lorem Ipsum3</h4>
            <div class="clearfix"></div>
          </div>
        </div>
        <div class="col-sm-3 chand">
          <div class="trust-wrap" id="11">
            <img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive">
            <h4>Lorem Ipsum4</h4>
            <div class="clearfix"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="trust-datail tab_8" style="display: none;">
      <div class="close-new">
        <img src="images/close-new.png">
      </div>
      <h5>Lorem Ipsum1</h5>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries</p>
    </div>
    <div class="trust-datail tab_9" style="display: none;">
      <div class="close-new">
        <img src="images/close-new.png">
      </div>
      <h5>Lorem Ipsum2</h5>
      <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries</p>
    </div>
    <div class="trust-datail tab_10" style="display: none;">
      <div class="close-new">
        <img src="images/close-new.png">
      </div>
      <h5>Lorem Ipsum3</h5>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries</p>
    </div>
    <div class="trust-datail tab_11" style="display: none;">
      <div class="close-new">
        <img src="images/close-new.png">
      </div>
      <h5>Lorem Ipsum4</h5>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries</p>
    </div>
  </div>
</div>

, , . - , .

+3

"col-sm-3" "col-md-3". , html

<div class="container">
        <div class="member_wrap">
            <div class="member_box">
                <div class="row">
                    <div class="col-md-3 chand">
                        <div class="trust-wrap" id="8">
                            <img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive">
                            <h4>Lorem Ipsum1</h4>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <div class="col-md-3 chand">
                        <div class="trust-wrap" id="9">
                            <img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive">
                            <h4>Lorem Ipsum2</h4>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <div class="col-md-3 chand">
                        <div class="trust-wrap" id="10">
                            <img src="http://lorempixel.com/output/people-q-c-250-250-9.jpg" alt="" class="img-responsive">
                            <h4>Lorem Ipsum3</h4>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                    <div class="col-md-3 chand">
                        <div class="trust-wrap" id="11">
                            <img src="http://lorempixel.com/output/city-q-c-250-250-4.jpg" alt="" class="img-responsive">
                            <h4>Lorem Ipsum4</h4>
                            <div class="clearfix"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="trust-datail tab_8" style="display: none;">
                <div class="close-new">
                    <img src="images/close-new.png">
                </div>
                <h5>Lorem Ipsum1</h5>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
            </div>
            <div class="trust-datail tab_9" style="display: none;">
                <div class="close-new">
                    <img src="images/close-new.png">
                </div>
                <h5>Lorem Ipsum2</h5>
                <p> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
            </div>
            <div class="trust-datail tab_10" style="display: none;">
                <div class="close-new">
                    <img src="images/close-new.png">
                </div>
                <h5>Lorem Ipsum3</h5>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
            </div>
            <div class="trust-datail tab_11" style="display: none;">
                <div class="close-new">
                    <img src="images/close-new.png">
                </div>
                <h5>Lorem Ipsum4</h5>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries</p>
            </div>
        </div>
    </div>

, . , , .

0

Source: https://habr.com/ru/post/1685500/

More articles:


All Articles