In my current website setup, I have implemented a feature where clicking on a div triggers the appearance of a sub menu below the clicked div. Now, I am attempting to detach() this sub menu, insert it after the div that was clicked, and adjust its position using margin-left or float so that it appears to the right of the original div.
*Here is a visual example of my current setup and what I am aiming to achieve
html:
<div>
<div class="nav-name nav-padding">Alpha</div>
<div class="Beta">
<div class="Delta">
<div class="Omega">A</div>
<div class="Omega">B</div>
<div class="Omega">C</div>
<div class="Omega">D</div>
</div>
</div>
<div class="foo" style="display: none;"></div>
</div>
script:
function ClickItem() {
$('.nav-name').click(function () {
var itemText = $(this);
$(this).next('.delta').slideToggle('slow');
//$(this).next('.delta').toggle('slow');
//itemText.next().html().detach();
//itemText.next().html().insertAfter(.nav-name).css("margin-left", "20px");
});
}
I am uncertain about whether this approach is optimal and if there might be a more efficient method to accomplish this task. Please feel free to suggest an alternative approach if you believe there is a better way to achieve the desired outcome.
Thank you