Using SSI With Toggle Buttons

Started by Mick, Apr 10, 2020

Apr 10, 2020 Last Edit: May 24, 2020 by Mick
"Using SSI With Toggle Buttons"
A fancy drop down buttons using SimpleMachine's API. SSI.php provides ways to add live information to your website by linking to your SMF Forum software. This is very useful for attracting further interest to your discussion areas and making your SMF Forum truly a part of your website experience by including recent posts, users online and a whole host of other data that can be displayed to your visitors.


The CSS:
1. Open /Themes/your-theme/css/index.css and the very bottom add:

.mainToggle {
  max-width: 375px;
}

.wrapToggle > li {
  cursor:pointer;
  list-style-type: none;
}

.wrapToggle > li > h4 {
  padding:20px;
  text-transform:uppercase;
  letter-spacing:2px;
  color:#fff;
  font-size:13px;
  text-shadow:1px 1px 0px rgba(0,0,0,.1);
}

.blue {
  background: #3a9bdc;
  border:4px solid rgba(0,0,0,.1);
}

.strawb {
  background: #ff6060;
  border:4px solid rgba(0,0,0,.1);
}

.yellow {
  background: #ffc500;
  border:4px solid rgba(0,0,0,.1);
}

.green {
  background: #63b47a;
  border:4px solid rgba(0,0,0,.1);
}

.pink {
  background: #ed327b;
  border:4px solid rgba(0,0,0,.1);
 
}

h4:hover {
  border:4px solid rgba(0,0,0,.2);
}

.content_toggle  {
  display:none;
  padding:15px;
  font-size:15px;
  word-spacing:3px;
  line-height:1.5em;
  background:#fff;
  color:#bbb;
  border-left:5px solid rgba(0,0,0,.1);
  border-right:5px solid rgba(0,0,0,.1);
}

.content_toggle:last-of-type {
  border:4px solid rgba(0,0,0,.1);
}


2. Create a PHP side block add the following:
Make sure the path to your forum in the code below is correct.


require("/home/************************/public_html/root-of-forum here if any/SSI.php");

echo '
<div class="mainToggle">
  <ul class="wrapToggle">
    <li>
      <h4 class="head blue">Boards</h4>
      <div class="content_toggle">'; ssi_topBoards(); echo ' </div>
    </li>
    <li>
      <h4 class="head strawb">News</h4>
      <div class="content_toggle">'; ssi_news(); echo ' </div>
    </li>
    <li>
      <h4 class="head yellow">Today\'s Calendar</h4>
      <div class="content_toggle">'; ssi_todaysCalendar(); echo ' </div>
    </li>
    <li>
      <h4 class="head green">Who\'s Online</h4>
      <div class="content_toggle">'; ssi_whosOnline(); echo ' </div>
    </li>
    <li>
      <h4 class="head pink">Latest member</h4>
      <div class="content_toggle">'; ssi_latestMember(); echo ' </div>
    </li>
  </ul>
</div>';

echo '
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
    $(".head").click(function () {
        $(this).next(".content_toggle").slideToggle();
        $(this).parent().siblings().children().next().slideUp();
        return false;
    });
    $(".head").bind("touchstart", function (e) {
        $(this).trigger("click");
        e.preventDefault();
    });
});
</script>';


Reference:
https://codepen.io/dope/pen/yuzvq
Category:SSI - Online Manual