We Keep Coding

The modal close icon and the text of the modal are incorrect

<div class="modal-title-area">
<div class="modal-name">
#{ ViewBag.Title = "Kişisel Bilgiler"; } #EmployeeCardRes.PersonalInfo
</div>
<div class="modal-root-page tag-label">
<i class="close icon"></i>
</div>
</div>
<div class="modal-divider"></div>
<div class="modal-content-area">
<div class="two-fields">
<div class="field ">
<div class="label">
#EmployeeCardRes.FirstName #EmployeeCardRes.LastName
<div class="text">#Model.FirstName #Model.LastName</div>
</div>
</div>
<div class="field">
<div class="label">#EmployeeCardRes.PositionCode
<div class="text">#ViewBag.Position</div>
</div>
</div>
</div>
</div>
Labels inside div need to correspond to posts. but the label is going down the text above how can I fix it.
I want to do like that

You will want to split out your div elements for label and text for each row, so where you have
<div class="field">
<div class="label">#EmployeeCardRes.PositionCode
<div class="text">#ViewBag.Position</div>
</div>
</div>
You should replace it with something more like this:
<div class="field">
<div class="label">
#EmployeeCardRes.PositionCode
</div>
<div class="text">
#ViewBag.Position
</div>
</div>
You can then use CSS to modify the way the DOM positions and displays them, something like the following will give you bold text and a little separation:
.label,
.text {
display: inline-block;
font-weight: bold;
margin: 5px;
min-width: 200px;
}

Hide 2 of the 3 item divs

I'm trying to hide 2 of the 3 item divs, the class name is item. I can usually use css display none, but they all have the same name, and its coming from WordPress plug in, and I believe its a template, so any changes made, it just replicates. Is there anyway I can add ID to each div which will automatically increment value by one, then I can use CSS display option?
<div class="related-post grid">
<div class="post-list">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
to
<div class="related-post grid">
<div class="post-list">
<div class="item" id="01">
</div>
<div class="item" id="02">
</div>
<div class="item" id="03">
</div>
</div>
</div>

You can use CSS pseudo classes to accomplish what you want:
.related-post .post-list .item:not(:last-child) {
display: none;
}
will hide any element with class item that is not the last element.
Or if you want to specifically target the first and second element:
.related-post .post-list .item:nth-child(1),
.related-post .post-list .item:nth-child(2)
{
display: none;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/:not
https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

In Javascript you could assign dynamically an id attribute to all the .item elements like so:
document.querySelectorAll('.item').forEach((i,n) => i.id = 'item_' + ++n);
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>

Expand / Show and hide div element in a listview

As you can see, is this a list view and my mission is when you click on an element / div then the div with the images expand / show. Now that is easy, even for a backend developer, but I would like to:
1. when I click again on the same element, then the element will hide.
2. When I click on another element, then the element that is already expand will hide and the other element that I click on, will expand / show.
I need Script and CSS for this please.
<div class="row">
#foreach(var post in CurrentPage.Children)
{
<div class="col-md-12">
<div class="content equal" onclick="showhide()">
<a href="#post.Url">
<div class="date">#post.CreateDate.ToLongDateString()</div>
<h2>#post.Name</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images(-expand)">
<img src="#post.Image" />
</div>
</div>
}
</div>

Try as follows.
$('.content.equal').click(function() {
$('.content.equal').not(this).next().slideUp();
$(this).next().slideToggle();
});
$('.content.equal a').click(function(event) {
event.preventDefault();
});
.images {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>
<div class="col-md-12">
<div class="content equal">
<a href="#post.Url">
<div class="date">12-01-2017</div>
<h2>Name1</h2>
<p>#Umbraco.Truncate(post.Introduction, 240, true)</p>
</a>
</div>
<div class="images">
<img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
</div>
</div>

created the div in javascript

in my project i have something like this in my html :
<div class="row">
<div class="span3">
<div class="dropdown">
<select class="selectpicker btn-success" id="groupe"
data-style="btn-primary">
<option value="">Awaiting data...</option>
</select>
</div>
</div>
</div>
<div class="tabbable ">
<!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active">Economics</li>
<li>Physics</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>
<div class="row">
<div class="span4">
<div id="reportingContainer" style='width: 300px; height: 300px;'></div>
</div>
<div class="span8">
<div id="dashboard">
<div id="combochart" style='width: 915px; height: 300px;'></div>
<div id="control" style='width: 915px; height: 50px;'></div>
</div>
</div>
</div>
</p>
</div>
<div class="tab-pane" id="tab2">
<p></p>
</div>
</div>
</div>
i want that we i click in my drop down and i select something, sometimes i can see only
<div class="tab-pane active" id="tab1">
and sometimes i can see only
<div class="tab-pane" id="tab2">
and sometimes i can see both of them,actually it depends of my database. how we can say in javascript for created the div ?

We need what are you asking for to provide some help.
I guess you need to register the Change event in the Select HTML element. Depending on the selected value, do your "something v1" or your "something v2".
$("#YOUR_SELECT_ID").on("change",function(){
var YOUR_SELECTED_ELEMENT = $(this).val();
if (CHECK_THE_VALUE_OF_YOUR_SELECTED_ELEMENT) {
// do some stuff corresponding your "something v1"
}
else {
// do some styff corresponding your "something v2"
}
});
Has been useful?

You can hide or show any element by css style accesing by its id.
Example.
document.getElementById("element").style.display="value";
change value to none to hide and block to view the element.

Show Hide div with css only

I'm trying to do a show / hide using css only, is that possible or does some type of jscript is needed? this is what i'm trying to do, when anyone one of the 4 div's are clicked the div for it below is shown.
<div class="span3">
<img src="an1.jpg" class="img-rounded" />
<h3>AN1<br />1234</h3>
</div>
<div class="span3">
<img src="an2.jpg" class="img-rounded" />
<h3>AN2<br />1234</h3>
</div>
<div class="span3">
<img src="an3.jpg" class="img-rounded" />
<h3>AN3<br />1234</h3>
</div>
<div class="span3">
<img src="an4.jpg" class="img-rounded" />
<h3>AN4<br />1234</h3>
</div>
Show div when div is click:
<div style="display: none;"> this is AN1 </div>
<div style="display: none;"> this is AN2 </div>
<div style="display: none;"> this is AN3 </div>
<div style="display: none;"> this is AN4 </div>

You can use a hidden input that can be toggled that corresponds to the label in the click area.
<div class="span3">
<label for="an1">
<img src="an1.jpg" class="img-rounded" />
</label>
<h3><label for="an1">AN1<br />1234</label></h3>
</div>
...
<input id="an1" type=checkbox><div style="display: none;"> this is AN1 </div>
Then in your CSS:
[type=checkbox] {
display: none;
}
:checked + div {
display: block !important;
}
I would also stear clear of style and just use the stylesheet.
http://jsfiddle.net/ExplosionPIlls/ZyAXA/1/

In most browsers you should simply use the href attribute of the a elements and an id for the element to show:
Div one
Div two
Div three
Div four
<div id="content">
<div id="div1">This is div one</div>
<div id="div2">This is div two</div>
<div id="div3">This is div three</div>
<div id="div4">This is div four</div>
</div>
Coupled with the CSS:
#content > div {
display: none;
}
#content > div:target {
display: block;
}
JS Fiddle demo.
In the HTML the wrapper div (#content) isn't necessary, it's simply to make it easier to specifically target those elements it contains (you could, of course, simply use a class instead).
To add hiding functionality (to hide all, rather than just hide the sibling divs when showing another), unfortunately requires a link to trigger a hash-change (in order to stop the :target selector matching the divs), which in turn requires a link (either in each of the divs to show or elsewhere in the document, either linking elswhere (as follows):
<ul id="andHideAgain">
<li>Div one</li>
<li>Div two</li>
<li>Div three</li>
<li>Div four</li>
</ul>
<div id="content">
<div id="div1">This is div one <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div2">This is div two <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div3">This is div three <a class="hide" href="#andHideAgain">hide</a></div>
<div id="div4">This is div four <a class="hide" href="#andHideAgain">hide</a></div>
</div>
JS Fiddle demo (link in each div).
Or the simple use of just a hash:
Div one
Div two
Div three
Div four
hide
<div id="content">
<div id="div1">This is div one</div>
<div id="div2">This is div two</div>
<div id="div3">This is div three</div>
<div id="div4">This is div four</div>
</div>
JS Fiddle demo (using a single a, and an 'empty' hash).

this is how i solve show hide problem with just
here is my div with its class declared
<div class='loading'> </div>
and here is the javascript that
$('.loading').hide();
and
$('.loading').css("display", "block");