Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Morten Skjoldager 440 posts 1499 karma points
    Sep 14, 2014 @ 11:50
    Morten Skjoldager

    Hide/Show tree section

    Hi I'm creating a custom section for Umbraco, and was wondering weather it's possible to hide the tree and show it again by calling some java script functions - just like when the screen is smaller and it disappears.. The only thing i could come up with was: 

    angular.element('#navigation').scope().$apply(function() { $scope.showNavigation = false })

    But it still takes up the place since the elements are positioned absolute. Is there a way or should i hack it using css ? 



  • Dan Lister 416 posts 1974 karma points c-trib
    Sep 17, 2014 @ 12:55
    Dan Lister

    Hi Morten,

    If you are looking to toggle the tree panel, Warren Buckley published a new blog post today showing an example of how to do this. Here is his code snippet:

    angular.module('umbraco').controller('demo.toggler', function($scope, appState, eventsService) {
      //Create an Angular JS controller and inject Umbraco services appState & eventsService
      //Button Click - ToggleUmbracoNavigation
      $scope.toggleUmbracoNavigation = function() {
        //Get the current state of showNavigation
        var currentNavigationState = appState.getGlobalState('showNavigation');
        //console.log("currentNavigationState", currentNavigationState);
        //console.log("Inverse of currentNavigationState", !currentNavigationState);
        //Toggle the tree visibility
        appState.setGlobalState("showNavigation", !currentNavigationState);
      //The eventService allows us to easily listen for any events that the Umbraco applciation fires
      //Let's listen for globalState changes...
      eventsService.on("appState.globalState.changed", function (e, args) {
        //console.log("appState.globalState.changed (args)", args);
        if (args.key === "showNavigation") {
          //console.log("showNavigation value", args.key, args.value);
          //If false (So hiding navigation)
          if(!args.value) {
            //Set css left position to 80px (width of appBar)
            document.getElementById("contentwrapper").style.left = "80px";
          else {
            //Remove the CSS we set so default CSS of Umbraco kicks in
            document.getElementById("contentwrapper").style.left = "";

    Thanks, Dan.

Please Sign in or register to post replies

Write your reply to: