diff --git a/alplora/static/alplora/js/virtual_machine_detail.js b/alplora/static/alplora/js/virtual_machine_detail.js
index 303f95ca..39e4c3bf 100755
--- a/alplora/static/alplora/js/virtual_machine_detail.js
+++ b/alplora/static/alplora/js/virtual_machine_detail.js
@@ -15,4 +15,14 @@ $( document ).ready(function() {
     $('html,body').scrollTop(scrollmem);
   });
 
+
+    // Toggle subscription and one-time payments div
+    $('#li-one-time-charges').click(function() {
+        console.log("li-one-time-charges clicked");
+    });
+    $('#li-subscriptions').click(function() {
+      console.log("li-one-time-charges clicked");
+    });
+
+
 });
\ No newline at end of file
diff --git a/hosting/templates/hosting/invoices.html b/hosting/templates/hosting/invoices.html
index 32ec8004..554858dc 100644
--- a/hosting/templates/hosting/invoices.html
+++ b/hosting/templates/hosting/invoices.html
@@ -16,10 +16,10 @@
     </div>
 
 <ul class="nav nav-tabs">
-  <li class="active"><a href="#">{% trans "Subscriptions" %}</a></li>
-  <li><a href="#">{% trans "One-time payments" %}</a></li>
+  <li class="active" id="li-subscriptions"><a href="#">{% trans "Subscriptions" %}</a></li>
+  <li id="li-one-time-payments"><a href="#">{% trans "One-time payments" %}</a></li>
 </ul>
-    <div class="subscriptions">
+    <div class="subscriptions" id="subscriptions">
     <table class="table table-switch">
         <thead>
             <tr>
@@ -73,7 +73,8 @@
 {% endif %}
         </div>
 
-        <div class="one-time-charges">
+
+ <div id="#one-time-charges" class="one-time-charges invisible">
     <table class="table table-switch">
         <thead>
             <tr>