Click here to Skip to main content
15,747,908 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi all,

I have small problem in HTML that I have one main div in that some div's are displayed based on user select some link like Display All Items, All Quotes, All Events etc...

and the point is For GetAllQuotes the Quote has a list of Items and a List of Events.

I will get the list value from my DB. Its fine that point.Now I have created a div with labels and textboxes for the Item and Event Div's

for Item(Name,Price,Barcodenumber,Depreciation etc) and for Events like (EventName, Start Date, End Date etc...)

Now I want that div's to appear whenever and where ever I want to display say for suppose If click on GetAllEvents then only EventDiv should display and when I click on GetAllQuotes link AllItems and AllEventsDiv should appear inside the QuoteDiv.

Hope every one has got understood what my problem is?
I want to display a div whereever I want in my main div?

Can this is possible using either CSS or Javascript?

Please do help me.

Thanks in Advance

I 60-70% got your problem and i am having little good knowledge in this languages. So can you please help me by sending your sample code and error?? this will help me to find your exact problem and then i will give you better solution. If you are not comfortable to revel your code at public site, then you can mail me on
Thank you.
Share this answer
Ganesh KP 28-Sep-12 1:35am    
Thanks Kumash
Here is my code

<div id="ItemsDiv" align="left" class="invoptDiv">

<label for="Caption" style=" font-family:Verdana ; font-size:larger; font-weight:bold; font-variant:small-caps; color:#5190cf;">Inventory Item</label>

<label for="Name" class="showLBL">Name :</label><br />
<div class="showTxtDiv"><input type="text" id="txtItemname" class="txtboxCSS"/></div>

<label for="Make" class="showLBL">Make :</label><br />
<div class="showTxtDiv"><input type="text" id="txtMake" class="txtboxCSS"/></div>

<label for="Model" class="showLBL">Model :</label><br />
<div class="showTxtDiv"><input type="text" id="txtModel" class="txtboxCSS"/></div>


and it is my EventDiv.

<div id="EventDiv" align="left" class="invoptDiv" style="display:block;">

<label for="Caption" style=" font-family:Verdana ; font-size:larger; font-weight:bold; font-variant:small-caps; color:#5190cf;">Event Details</label>

<label for="Make" class="showLBL">Name :</label><br />
<div class="showTxtDiv"><input type="text" id="txtName" class="txtboxCSS"/></div>

<label for="Name" class="showLBL">Event Start Date :</label><br />
<div class="showTxtDiv"><input type="text" id="txtStartDate" class="txtboxCSS"/></div>

<label for="Name" class="showLBL">Event End Date :</label><br />
<div class="showTxtDiv"><input type="text" id="txtEndDate" class="txtboxCSS"/></div>

<label for="Model" class="showLBL">Location :</label><br />
<div class="showTxtDiv" style="height:auto;">
<textarea id="txtLocation" class="txtboxCSS" rows="3" cols="17"></textarea></div>

<label for="Model" class="showLBL">Description :</label><br />
<div class="showTxtDiv" style="height:auto;">
<textarea id="txtEventDescription" class="txtboxCSS" rows="3" cols="17"></textarea></div>
<br />

<%--Event Despatch Combo Box--%>
<label for="EventDespatches" class="showLBL">Event Despatches :</label><br />
<div class="showTxtDiv">
<select id="cmbEventDespatch" class="txtboxCSS" önchange="javascript:GetEventDespatch();">
<option selected="selected" value="0">Select</option>
<option value="1">Event DespatchId 1</option>
<option value="2">Event DespatchId 2</option>
<option value="3">Event DespatchId 3</option>
<%--Event Despatches Combo Box--%>
<br />
<%--Despatch Container Combo Box--%>
<label for="DespatchContaoiners" class="showLBL">Despatch Containers:</label><br />
<div class="showTxtDiv">
<select id="cmbDespatchContainers" class="txtboxCSS">

<%--Despatch Container Combo Box--%>
<br />

<%--Container Items Combo Box--%>
<label for="ContainerItems" class="showLBL">Container Items:</label><br />
<div class="showTxtDiv">
<select id="cmbContItems" class="txtboxCSS">

<%--Container Items Combo Box--%>
<br />

<%--Single Items Combo Box--%>
<label for="SingleItems" class="showLBL">Single Items:</label><br />
<div class="showTxtDiv">
<select id="cmbSingleItems" class="txtboxCSS">

<%--Single Items Combo Box--%>
<br />

So I think you have got my problem I want to display the Items DIv when I click Items link and also when I click Events Div I want that div to be under the events div. i.e where ever I want I can be placed. and I donot got any error I donot know how to add using javascript. Hope you have got my complete problem.

<div class="showTxtDiv" align="cente
Kumash 29-Sep-12 4:02am    
i will be back in few hours..... with solution!
try this example:[^]

is it what you need?

it's done using jquery
Share this answer
I have used Jquery.after() and .before() functions and place that div id


using this two we can show our div where evr we want just before or after and inner code in between paenthesis to show /hide div's

Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900