Skip to content

Instantly share code, notes, and snippets.

@schleim

schleim/content.html

Last active November 19, 2015 09:55
Show Gist options
  • Save schleim/de3fc79cbbd0ae6dbd1b to your computer and use it in GitHub Desktop.
Save schleim/de3fc79cbbd0ae6dbd1b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. schleim revised this gist Nov 19, 2015. No changes.
  2. schleim revised this gist Nov 19, 2015. No changes.
  3. schleim revised this gist Nov 19, 2015. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions content.html
    View file
    Original file line number Diff line number Diff line change
    @@ -8,3 +8,4 @@
    <img ng-if="showImage" src="">
    </dd>
    </dl>
    </section>
  4. schleim revised this gist Nov 19, 2015. No changes.
  5. schleim created this gist Nov 19, 2015.
    10 changes: 10 additions & 0 deletions content.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    <section class="accordion" accordion accordion-on-open="showImage=true" >
    <dl>
    <dt>
    <a href="" class="">Link</a>
    </dt>
    <dd class="cf ">
    Content
    <img ng-if="showImage" src="">
    </dd>
    </dl>
    27 changes: 27 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    myAngularApp.directive('accordion',
    function() {
    return {
    restrict: 'AE',
    scope:{
    accordionOnOpen: '&' // write attribute to scope variable
    },
    link: function(scope, element, attrs, controller) {
    var $link = $(element).find('dt a');
    var $pane = $(element).find('dd');

    $(element).off('click').on('click',function(){
    if(!$link.hasClass('active')){
    $pane.slideDown();
    $link.addClass('active');
    scope.$apply(function() {
    scope.$eval(scope.accordionOnOpen); // compile attribute expression
    });
    }else{
    $pane.slideUp();
    $link.removeClass('active');
    }
    });
    }
    };
    }
    );