diff --git a/html/includes/functions.inc.php b/html/includes/functions.inc.php
index 7118facdb9..68324611cf 100644
--- a/html/includes/functions.inc.php
+++ b/html/includes/functions.inc.php
@@ -777,4 +777,33 @@ function clean_bootgrid($string) {
 
 }
 
+function alert_details($details) {
+    if( !is_array($details) ) {
+      $details = json_decode(gzuncompress($details),true);
+    }
+    $fault_detail = '';
+    foreach( $details['rule'] as $o=>$tmp_alerts ) {
+      $fallback = true;
+      $fault_detail .= "#".($o+1).": ";
+      if( $tmp_alerts['bill_id'] ) {
+        $fault_detail .= '<a href="'.generate_bill_url($tmp_alerts).'">'.$tmp_alerts['bill_name'].'</a>;&nbsp;';
+        $fallback = false;
+      }
+      if( $tmp_alerts['port_id'] ) {
+        $fault_detail .= generate_port_link($tmp_alerts).';&nbsp;';
+        $fallback = false;
+      }
+      if( $fallback === true ) {
+        foreach( $tmp_alerts as $k=>$v ) {
+          if (!empty($v) && $k != 'device_id' && (stristr($k,'id') || stristr($k,'desc') || stristr($k,'msg')) && substr_count($k,'_') <= 1) {
+            $fault_detail .= "$k => '$v', ";
+          }
+        }
+        $fault_detail = rtrim($fault_detail,", ");
+      }
+      $fault_detail .= "<br>";
+    }
+    return $fault_detail;
+}
+
 ?>
diff --git a/html/includes/table/alertlog.inc.php b/html/includes/table/alertlog.inc.php
index 0d15037c3d..860d6066fe 100644
--- a/html/includes/table/alertlog.inc.php
+++ b/html/includes/table/alertlog.inc.php
@@ -39,10 +39,12 @@ if ($rowCount != -1) {
     $sql .= " LIMIT $limit_low,$limit_high";
 }
 
-$sql = "SELECT D.device_id,name AS alert,state,time_logged,DATE_FORMAT(time_logged, '%D %b %Y %T') as humandate $sql";
+$sql = "SELECT D.device_id,name AS alert,state,time_logged,DATE_FORMAT(time_logged, '%D %b %Y %T') as humandate,details $sql";
 
+$rulei = 0;
 foreach (dbFetchRows($sql,$param) as $alertlog) {
     $dev = device_by_id_cache($alertlog['device_id']);
+    $fault_detail = alert_details($alertlog['details']);
     $alert_state = $alertlog['state'];
     if ($alert_state=='0') {
         $glyph_icon = 'ok';
@@ -69,8 +71,10 @@ foreach (dbFetchRows($sql,$param) as $alertlog) {
         $glyph_color = 'khaki';
         $text = 'Better';
     }
-    $response[] = array('time_logged'=>$alertlog['humandate'],
-                        'hostname'=>generate_device_link($dev, shorthost($dev['hostname'])),
+    $response[] = array('id'=>$rulei++,
+                        'time_logged'=>$alertlog['humandate'],
+                        'details'=>'<a class="glyphicon glyphicon-plus incident-toggle" style="display:none" data-toggle="collapse" data-target="#incident'.($rulei).'" data-parent="#alerts"></a>',
+                        'hostname'=>'<div class="incident">'.generate_device_link($dev, shorthost($dev['hostname'])).'<div id="incident'.($rulei).'" class="collapse">'.$fault_detail.'</div></div>',
                         'alert'=>htmlspecialchars($alertlog['alert']),
                         'status'=>"<b><span class='glyphicon glyphicon-".$glyph_icon."' style='color:".$glyph_color."'></span> $text</b>");
 }
diff --git a/html/includes/table/alerts.inc.php b/html/includes/table/alerts.inc.php
index fb23c6c841..da2a6d1c6a 100644
--- a/html/includes/table/alerts.inc.php
+++ b/html/includes/table/alerts.inc.php
@@ -39,29 +39,7 @@ $rulei = 0;
 $format = $_POST['format'];
 foreach (dbFetchRows($sql,$param) as $alert) {
     $log = dbFetchCell("SELECT details FROM alert_log WHERE rule_id = ? AND device_id = ? ORDER BY id DESC LIMIT 1", array($alert['rule_id'],$alert['device_id']));
-    $log_detail = json_decode(gzuncompress($log),true);
-    $fault_detail = '';
-    foreach ( $log_detail['rule'] as $o=>$tmp_alerts ) {
-      $fallback = true;
-      $fault_detail .= "#".($o+1).":&nbsp;";
-      if( $tmp_alerts['bill_id'] ) {
-        $fault_detail .= '<a href="'.generate_bill_url($tmp_alerts).'">'.$tmp_alerts['bill_name'].'</a>;&nbsp;';
-        $fallback = false;
-      }
-      if( $tmp_alerts['port_id'] ) {
-        $fault_detail .= generate_port_link($tmp_alerts).';&nbsp;';
-        $fallback = false;
-      }
-      if( $fallback === true ) {
-        foreach ($tmp_alerts as $k=>$v) {
-          if (!empty($v) && $k != 'device_id' && (stristr($k,'id') || stristr($k,'desc') || stristr($k,'msg')) && substr_count($k,'_') <= 1) {
-            $fault_detail .= "$k => '$v', ";
-          }
-        }
-        $fault_detail = rtrim($fault_detail,", ");
-      }
-      $fault_detail .= "<br>";
-    }
+    $fault_detail = alert_details($log);
 
     $ico = "ok";
     $col = "green";
diff --git a/html/pages/alert-log.inc.php b/html/pages/alert-log.inc.php
index 45cfac998d..44eeb404c6 100644
--- a/html/pages/alert-log.inc.php
+++ b/html/pages/alert-log.inc.php
@@ -17,10 +17,12 @@ $pagetitle[] = "Alert Log";
             ');
 ?>
 
+<div class="table-responsive">
 <table id="alertlog" class="table table-hover table-condensed table-striped">
     <thead>
         <tr>
             <th data-column-id="time_logged" data-order="desc">Time logged</th>
+            <th data-column-id="details" data-sortable="false">&nbsp;</th>
             <th data-column-id="hostname">Device</th>
             <th data-column-id="alert">alert</th>
             <th data-column-id="status" data-sortable="false">Status</th>
@@ -28,6 +30,7 @@ $pagetitle[] = "Alert Log";
     </thead>
 </table>
 </div>
+</div>
 
 <script>
 
@@ -78,5 +81,27 @@ var grid = $("#alertlog").bootgrid({
     search = $('.search-field').val();
 
     $(".pdf-export").html("<a href='pdf.php?report=alert-log&device_id=<?php echo $_POST['device_id'];?>&string="+search+"&results="+max+"&start="+low+"'><img src='images/16/pdf.png' width='16' height='16' alt='Export to pdf'> Export to pdf</a>");
+
+    grid.find(".incident-toggle").each( function() {
+      $(this).parent().addClass('incident-toggle-td');
+    }).on("click", function(e) {
+      var target = $(this).data("target");
+      $(target).collapse('toggle');
+      $(this).toggleClass('glyphicon-plus glyphicon-minus');
+    });
+    grid.find(".incident").each( function() {
+      $(this).parent().addClass('col-lg-4 col-md-4 col-sm-4 col-xs-4');
+      $(this).parent().parent().on("mouseenter", function() {
+        $(this).find(".incident-toggle").fadeIn(200);
+      }).on("mouseleave", function() {
+        $(this).find(".incident-toggle").fadeOut(200);
+      }).on("click", "td:not(.incident-toggle-td)", function() {
+        var target = $(this).parent().find(".incident-toggle").data("target");
+        if( $(this).parent().find(".incident-toggle").hasClass('glyphicon-plus') ) {
+          $(this).parent().find(".incident-toggle").toggleClass('glyphicon-plus glyphicon-minus');
+          $(target).collapse('toggle');
+        }
+      });
+    });
 });
 </script>