We Keep Coding

How to append a bootstrap dropdown with a div based on ID?

In my angular, I have a dropdown component. Here is how it looks like:
<div dropdown placement="bottom left" #dropdown="bs-dropdown" [autoClose]="true"
[insideClick]="true" [container]="body">
<a class="templates-icon" dropdownToggle (click)="toggleTextTemplates();">
<i #one class="ic-text-templates" aria-hidden="true"></i>
</a>
<ng-container *ngIf="toggle" >
<div *dropdownMenu class="templates-container dropdown-menu"
role="menu" aria-labelledby="button-basic">
</ng-container>
</div>
Here in this example, container attribute is set to body and therefore the dropdown is bind with the body and visible top of each element.
Now let say I have three layer in my app. Layer-one, layer-two and layer-three and they are top of each other. Now I would like to display the dropdown only on layer-two (or imagine in middle layer). So I would like to bind this dropdown with layer-two based on id, so that drodown will be visible on top of layer one and two, but not the layer three:
<div id="layer-one">
some element 1
<div id="layer-two">
some element 2
<div id="layer-three"> some element 3</div>
</div>
</div>
Can someone please give me an idea, or solution how I can achieve that?

Have you tried to just place the dropdown at layer 2? otherwise you can can use javascript like: getElementByID('#33').innerhtml
or make CSS index rules, where there is a attribute called index: (-1) or (1) etc. for the placement of the dropdown

hide child tag inside li tag

I am a novice in html/js design. I have searched my specific requirement many ways, but couldn't find a solution. So, your help with a solution via jsfiddle or any example of syntax will be extremely helpful!!!
I have a li element like this in two different div's:
<div id="1">
<li> <strong>Song Text</strong><em>Artist</em><var>Lyrics</var></li>
</div>
<div id="2">
<li> <strong>Song Text</strong><em>Artist</em><var>Lyrics</var></li>
</div>
As can be seen, li tag comprises of different sub tags(called elements??) like strong, em, var. How do I hide var tag text in first div? i.e., to make it a more generic, how do I only hide(not delete) text within a sub-tag in a li tag ? Also, the text needs to be when the page loads, and not by a button click.
Thank you!

How do I hide var tag text in first div?
simply try this
$("#1 li var").hide();
to make it a more generic, how do I only hide(not delete) text within
a sub-tag in a li tag ?
$("li").children().hide(); //$("li").children("var").hide(); to hide only var
or
$("li").find("*").hide();

Like this one?
$('#1 li').find('var').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="1">
<li> test<strong>Song Text</strong><em>Artist</em><var>Lyrics</var></li>
</div>
<div id="2">
<li> test<strong>Song Text</strong><em>Artist</em><var>Lyrics</var></li>
</div>

toggle class content on click from nav

I have a simple page with 15 elements in the Nav bar (only 4 in the jsfiddle example to keep the code short).
I have a javascript that moves the border-bottom display on click on the nav bar elements but I would also like the content of the div underneath to change based on which nabber item is clicks.
This is the jsfiddle.
Ive tried getElementByID but I somehow cant seem to change the class under my #tabs-content div...
I would like a javascript loop that changes the content of each section element's class from hide to show or show to hide depending on what the content is.
This is the o'clock event in my
<li class="tab-current"><span>Dashboard</span></li>
and I would like it to change the class from hide to show for id=section2 and from show to hide for section2:
<div id="tabs-content">
<section id="section1" class="show">
<p>1</p>
</section>
<section id="section2" class="hide">
<p>2</p>
</section>
</div>
Any ideas please?
Cheers,
M.

Is this what you are looking for? Since you have the id of each section in the href you can pull that to load the appropriate one:
JS
var currentTab = $(this).find("a").attr("href");
$(currentTab).show().siblings("section").hide();
Change CSS (unless you want the elements to take up space on the page its better to set to display: none):
#tabs-content section.show {
display: block
}
#tabs-content section.hide {
display: none;
}
JSFIDDLE

Positioning issue in ExpressionEngine cms

I have a positioning issue with my in expression engine. click Here On the following link I am looping elements with <div id="services-container"> I have noticed it loops fine on the first row however begins to misalign on the second row. I have made attempts to use the switch="" tag to create an individual class for each loop, see below:
{exp:channel:entries channel="services" dynamic="no" sort="asc|desc"}
<div id="services-container" class="{switch='1|2|3|4|5|6'}">
<div class="service-content">
<img src="{service_image}" alt="banner" alt="{alt}" class="service-banner">
<p>{service_head_line}</p>
{service_listed_items}
<ul class="service-credentials">
<li>{service_list_1}</li>
<li>{service_list_2}</li>
<li>{service_list_3}</li>
</ul>
<ul class="service-credentials">
<li>{service_list_4}</li>
<li>{service_list_5}</li>
<li>{service_list_6}</li>
</ul>
View related projects »
{/service_listed_items}
</div><!--service-content-->
</div><!--SERVICES CONTAINER-->
{/exp:channel:entries}
When i try to class these classes out in my style sheet nothing is happening. Does anyone know what i am doing wrong?

This involves ExpressionEngine but also css. Basically you are trying to create a grid with 3 items in each row, correct ?
Each of these "row" has to adopt a float containment strategy, since it only contains 3 floated items. The way I would go about it using the switch parameter:
{exp:channel:entries channel="services" dynamic="no" orderby="date" sort="asc"}
{if "{switch='one|two|three'}" == "one"}<div class="row">{/if}
<div class="item">
...code...
</div>
{if "{switch='one|two|three'}" == "three" || count == total_results}</div>{/if}
{/exp:channel:entries}
That code would include a div with a class of row every three items in that loop.
Then, if your items are floated, your rows must have some sort of float clearing strategy to contain them like overflow:hidden; or a clearfix method.

How to show the description of the elements that are listed on the sidebar on the body using show & hide javascript or JQuery?

I have 11 elements with long description of each element of them. I decided to display the elements on the sidebar and the description of each one of them will be displayed on the body directly when the user clicks on the element.
I came with a solution similar to this ONE
but the problem with this one is put the content (or description) inside the javascript code, and I want the description be on the HTML code to make it later on flexible for changes by the admin after putting the data including the description of these elements on the database instead of hard-coded style.
Therefore, how can I do that?

You can try this way
<div id="menu">
<ul>
<li id="a">item a
<div id="contentA" style="display:none">Description of item A</div>
</li>
<li id="b">item b
<div id="contentB" style="display:none">Description of item A</div>
</li>
</ul>
</div>
<div id="content"></div>
<script type="text/javascrip">
$(document).ready( function () {
$('#a').click(function() {
$('#content').html($('#contentA').html());
});
$('#b').click(function() {
$('#content').html($('#contentB').html());
});
});
<script>

I updated your example, it now uses hidden divs inside the clickable menu items, and on li click it finds the menu description and displays it.
This method does not depend on ids and degrades more gracefully (except if the client doesn't support JS but supports CSS display).

Your description is a bit unprecise, but if I get it right your could use IDs for the description text and fade them in/out with jQuery.
http://jsfiddle.net/PajFP/14/ (updated)