Animation and functionality (html structure) expand and counter specific boxes inside a container

Question

Animation and functionality (html structure) expand and counter specific boxes inside a container

Navigation

#1 by (2 votes)

3

Good, I'm working on a model, I have some idea of how to proceed but complicate me in doing so. First, it is a structure of boxes (divs) inside a container, organized to the grid, by clicking on 1 of them, it must expand and the 2 that are in the same row must be made smaller (without affecting the other rows).

Following this, each box will have a button (visible when clicking) that will expand a text box with the description, the box must be the size of the container, anchored to the expanded box (where it is activated) and the open should roll the rows below, in this case I would need to click on another part of the page (other than the open box) to close the box and resize the sizes.

        //test toggle class
    $(function() {
    var boxanime = $(".box-anime-cont .box "); 
    boxanime.click(function() {
    boxanime.removeClass("box-expand");
    boxanime.removeClass("box-ret");
    $(this).addClass("box-expand");
    $(this).removeClass("box-ret");
    boxanime.addClass("box-ret");
 });
});


//fade box-anime-detail
 $( ".btn-dt-anime" ).on( "click", function( event ) {
    if($(".detail-anime-box").hasClass('open') ){
          $(".detail-anime-box").removeClass('open');
        }
    else{
       $( event.target ).closest( ".box-expand" ).children(".detail-anime-box").toggleClass('open');
        }    
    });

        <!--box-->
    <div class="box">
        <div class="box-anime">
            <span class="caps">12</span>
            <span class="tag-a">anime</span>
        <img src="img/anime2.jpg" alt="">
            <span class="titulo-box-anime">Titulo del anime</span>
            <i class="fa fa-angle-down btn-dt-anime"></i>
        </div>
        <div class="detail-anime-box">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius dolorem et quibusdam, sapiente ratione necessitatibus quos ea. Expedita, odit! Reprehenderit a, impedit ex illum consequatur, perferendis accusamus. Provident, eos, cum!
        </div>
    </div>
    <!--//box-->



    .detail-anime-box{
    width: 0;
    height: 0;
    background: black;
    color: #fff;
}
.open{/*togggle box**/
  width: 230%;
    height: 100%;
}

javascript jquery html css3 estructuras

asked by Andrikol 22.09.2017 в 22:18

source

1 answer

Singleton and static member Php array String

score 2 · Accepted Answer

It's simple.

For the first requirement, when making the render (paint html) rows, assign a class to identify the rows eg class="row-1" and so sucevisamente for each row.

For the render I suggest studying templates in javascript, for example jsrender or dotjs, so that you understand the concept.

The basic html for a row should look like this, using bootstrap:

<div class="row>
    <div class="fila-1 animate pull-left" data-fila="1"></div><div class="fila-2 animate pull-left" data-fila="1"></div><div class="fila-3 animate pull-left" data-fila="1"></div>
</div>

Each div has the class of the row and the animate to create the click event. Additionally defined as data has the number of the row, to act only on the row elements, of the element on which it is clicked.

This is how you define the event, if the divs already exist in the sun:

$(".animate").click(function () {
    var fila = $(this).data("fila");
    $(".fila-" + fila).removeClass().addClass("close");
    $(this).addClass("open");
});

In the classes .open and .close, you define the presentation of the divs, sizes .... With this you have the first functionality.

On the second, can create a blank and hidden row, as a container, in the click event, further to the above, beams render the row, using the id element, adicionas other data-id, send the id, html and weapons charges in the sample container and the row select another, you can hide all the class "row-container", which have previously assigned to the empty and hidden row.

I hope I have helped you.