CODEWITHSUNDEEP
jqueryhtmlcss
Joel
Joel

Reputation: 6211

dynamically show content of div within another div

I need to be able to have a display-div, and load content into that single div, from other divs without refreshing the page. Let's say that i have the following structure:

Nav-div          Display-div
--------------  -------------
|            | |            |
| >>item1<<  | |content for |   
|   item2    | |   item1    |   
|   item3    | |            |       
|            | |            |
|            | |            |
|            | |            |
--------------  --------------

jquery:

$("a.menu").click(function() {
    var clicked = '#' + $(this).attr('title');
    $('.toggle:not('+clicked+')').hide(1000);
    $(clicked).show(1000);
});

HTML: 

<div class="ShowClickedContent">
<!-- This Would be the display-div -->
</div>

<nav>
    <a href="#" title="item1" class="menu">
    <a href="#" title="item2" class="menu">
    <a href="#" title="item3" class="menu">
</nav>

<div class="item1" style="display:none;">
    <p> the content here will be loaded into the ShowClickedContent div </p>
</div>
<div class="item2" style="display:none;">
    <p> the content here will be loaded into the div </p>
</div>
<div class="item3" style="display:none;">
    <p> the content here will be loaded into the div </p>
</div>

As of now, i can only get the divs to show by themselves in their own container, but not in the showClickedContent container. How would i go about this problem?

Upvotes: 2

Views: 2376

Answers (3)

Jatin patil
Jatin patil

Reputation: 4298

function show(obj) {
  var title = $(obj).attr('title');
  $(".ShowClickedContent").empty();
  $(".ShowClickedContent")[0].innerHTML = $("." + title)[0].innerHTML;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="ShowClickedContent">
<!-- This Would be the display-div -->
</div>

<nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
    <li><a href="#" title="item1" class="menu" onClick="show(this)"> item 1</li>
    <li><a href="#" title="item2" class="menu" onClick="show(this)"> item 2</li>
    <li><a href="#" title="item3" class="menu" onClick="show(this)"> item 3</li>
  </ul>
</nav>

<div class="item1" style="display:none;">
    <p> item1 the content here will be loaded into the ShowClickedContent div </p>
</div>
<div class="item2" style="display:none;">
    <p> item2 the content here will be loaded into the div </p>
</div>
<div class="item3" style="display:none;">
    <p> item3 the content here will be loaded into the div </p>
</div>

Upvotes: 0

Kalin Krastev
Kalin Krastev

Reputation: 648

function moveToDisplayDiv(elementId){ 
  $("#Nav-Div").remove(elementId);
  $("#Display-Div").append(elementId);
}

You now just have to call the moveToDisplayDiv('the id you've set to the element') function in the onclick="" attribute of the item that will trigger the movement. Notice you have to use their id="" attribute, and not the class="" attribute In your case i think it is the Item1, Item2, Item3 etc...

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337733

The simplest way to do this would be to use the href attribute of the a elements to hold the id of the target div elements. From there you can set the HTML of the .ShowClickedContent div to match. Try this:

$("a.menu").click(function(e) {
  $('.ShowClickedContent').html($($(this).attr('href')).html());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ShowClickedContent"></div>

<nav>
    <a href="#item1" class="menu">item1</a>
    <a href="#item2" class="menu">item2</a>
    <a href="#item3" class="menu">item3</a>
</nav>

<div id="item1" style="display: none;">
    <p>the content here will be loaded into the ShowClickedContent div</p>
</div>
<div id="item2" style="display: none;">
    <p>the content here will be loaded into the div #1</p>
</div>
<div id="item3" style="display: none;">
    <p>the content here will be loaded into the div #2</p>
</div>

However it seems a little redundant to copy existing HTML to another element just to make it visible if that content is already in the DOM. Why not just hide/show it as needed, like this:

$("a.menu").click(function(e) {
  $('.item').hide();
  $($(this).attr('href')).show();
});
.item { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="item1" class="item">
    <p>the content here will be loaded into the ShowClickedContent div</p>
</div>
<div id="item2" class="item">
    <p>the content here will be loaded into the div #2</p>
</div>
<div id="item3" class="item">
    <p>the content here will be loaded into the div #2</p>
</div>

<nav>
    <a href="#item1" class="menu">item1</a>
    <a href="#item2" class="menu">item2</a>
    <a href="#item3" class="menu">item3</a>
</nav>

Upvotes: 2

Related Questions