Post element using reference from another element

Question

Post element using reference from another element

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Position an element using the position reference of the div box, the element is in display none and when it receives the click event ira appears on the screen, however it should appear below the div box.

<h3> Sindico<i class="taskAtiv glyphicon glyphicon-chevron-down">
    </i>
    </h3>
 <div class="box row col-sm-2 box-white">
        <p class="task">Descrição</p>
        <br />
        <p class="task">Descrição</p>
        <br />
        <p class="task">Descrição</p>
        <br />
    </div>

css

  .box {
        width: 200px;
        font: 8px;
        padding: 5px;
        margin: 5px;
        border: 1px solid #ccc;
        display: none;
        position: absolute;
        z-index: 9999999999999999;
        top: 54%;
    }
  .task {
            cursor: pointer;
            padding-left: 5px;
            margin-bottom: 0px;
            border-bottom: 1px solid #ccc;
        }

Javascript

  $(".taskAtiv ").on("click", function () {
                $(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
            });

javascript jquery html5 css

asked by anonymous 01.11.2017 / 17:27

2 answers

0

  $(".taskAtiv ").on("click", function (e) {
                $(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
                var referenceElement = $(".taskCheckListHeader");
                var positionElement = referenceElement.offset();
                $(".box").css(positionElement);
                $(".box").toggle();

            });

solution based on first response, thanks from ja

01.11.2017 / 19:32

Decimals without rounding in javascript How to trigger the event cancel when I click outside the modal or ESC constraint?

score 1 · Accepted Answer

You can retrieve the position and size of the reference element and set the position of your element from the sum of them so that it is below.

var elementoReferencia = $(".taskAtiv");
var posicao = elementoReferencia.position();

$(".box").css("top", (posicao.top + elementoReferencia.height()));
$(".box").toggle();