Trax Trax - 6 months ago 27
jQuery Question

onclick change/restore container content

I have the following code: https://jsfiddle.net/ox5xq082/

<!doctype html>
<html>
<head>
<title>Profile</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="javascript/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<style>
body { padding-top:80px; word-wrap:break-word; }
</style>




</head>
<body>
<div class="container">

<div class="page-header text-center">
<h1><span class="fa fa-anchor"></span> Profile Page</h1>
</div>

<div class="row">
<!-- LOCAL INFORMATION -->
<div class="col-sm-3">
<div class="well">
<h3><span class="fa fa-user"></span> User Info </h3>
<p>
<strong>id</strong>: <%= user._id %><br>
<strong>email</strong>: <%= user.local.email %><br>
<strong>Username</strong>: <%= user.local.username %><br>
<strong>Country</strong>: <%= user.local.country %><br>
<strong>Region</strong>: <%= user.local.region %><br>
<hr>
<strong>Food</strong>: <%= user.local.inventory.food %><br>
<strong>Energy Drinks</strong>: <%= user.local.inventory.energyDrinks %><br>
<hr>
<strong>Eur</strong>: <%= user.local.budget.eur.toFixed(2) %><br>
<strong>Gold</strong>: <%= user.local.budget.gold.toFixed(2) %><br>
<strong>Silver</strong>: <%= user.local.budget.silver.toFixed(3) %><br>
<hr>
<strong>Estate</strong>: <% if (user.local.estate.movedIn === true) { %>
Owned
<% } else if (user.local.estate.rented.movedIn === true) { %>
Renting from <%= user.local.estate.rented.rentedFrom %>
<% } else { %>
No Office Owned or Rented
<% } %><br>
<hr>
<strong>Energy</strong>: <%= user.local.energy.toFixed(2) %>%<br>

</p>

<hr>
<button id="shop" class="btn btn-primary">Shop</button>
<button id="duel" class="btn btn-primary">Duel</button>
<a href="/logout" class="btn btn-danger btn-sm">Logout</a>
</div>
</div>
<!-- Center Page -->
<div id="center-div" class="col-md-9">
<div class="container">
default content
<div id="duel-window" style="width=100% height=100%"> duel content
<span id="pp_close" class="glyphicon glyphicon glyphicon-remove"></span>

</div>
<div id="shop-window" style="width=100% height=100%"> shop content
<span id="pp_close" class="glyphicon glyphicon glyphicon-remove"></span>

</div>
<div>
</div>

</div>

</div>
<script>
$('#duel').click(function() {

$('#duel-window').css("display","block")
});
$('#shop').click(function() {

$('#shop-window').css("display","block")
});
</script>
</body>
</html>


style.css

html {
height: 100%;
margin: 0;
padding: 0;
}

body {
margin: 0;
padding: 0;
}


#user-info {
float: left;
display: none;
}


#center-div {
background-color: #f5f5f5;
border: #e3e3e3;
height : 595px;

}

#duel-window {
display:none;
}
#shop-window {
display:none;
}
#pp_close {
position: absolute;
top: 0px;
right: 0px;
color: red;
font-size: 25px;
}


I want to be able to change just the content of center-div container. If I press Shop button it should change to shop content and when I press duel it should change to duel content. When I press the pp_close button it should go back to default content. How would I achieve this ?

hsh hsh
Answer

If you have many buttons and want much cleaner code follow these steps

HTML:

  1. add pp-close class and set different ids on ppCloses
  2. add each of your buttons a class named content-trigger to bind click event
  3. add each of you buttons a custom attribute named target-id that keeps the target content element id(target-id="#duel-window").
  4. add each of your contents a class named avalible-content

your html should look likes this:

<button id="shop" target-id="#shop-window" class="btn btn-primary content-trigger">Shop</button>
<button id="duel" target-id="#duel-window" class="btn btn-primary content-trigger">Duel</button>
<div class="container">
                default content
            <div id="duel-window" class="avalible-content" style="width=100% height=100%"> duel content 
                <span id="pp_close"  class="glyphicon glyphicon glyphicon-remove pp-close"></span>

            </div>
            <div id="shop-window" class="avalible-content" style="width=100% height=100%"> shop content
                <span id="pp_close1" class="glyphicon glyphicon glyphicon-remove pp-close"></span>

            </div>
        <div>
    </div>

JS:

  1. use show() and hide() to show or hide elements.
  2. use .content-trigger selector to bind all buttons onclick at once
  3. use target-id attribute to show the corresponding content
  4. use $(".avalible-content").hide(); to hide all contents before showing new one.

     $(".pp-close").click(function() {
        $("#shop-window").hide();
        $('#duel-window').hide();
     });
    
     $(".content-trigger").click(function(e) {
        $(".avalible-content").hide();
        var target = $(e.currentTarget).attr("target-id");
        $(target).show();
     });
    

CSS: add #pp_close1 to css

#pp_close,#pp_close1 {
   position: absolute;
   top: 0px;
   right: 0px;
   color: red;
   font-size: 25px;
}

a working sample HERE