Directive to Slide In/Slide Out Targeted Elements

Question

I have copied a directive (and working) to slide in slide out hidden areas on click, similar to jQuery hide and show.

This however, only works for when elements are together e.g. :

<div slider-toggle>Click to show.hide</div>
<div slider>
    Stuff to show and hide
</div>

However, what if the elements are not next to each other, e.g.

<ul>
    <li>
      <p>My list header</p>
      <span slider-toggle>Show</span>

    </li>
    <li slider>
      <p>Are to hide and show</p>
    </li>

  </ul>

This doesnt work and error occurs in console.

Directives:

angular.module('app', [])
.directive('sliderToggle', function() {
    return {
        restrict: 'AE',
        link: function(scope, element, attrs) {
            var target = element.next()[0];
            attrs.expanded = false;
            element.bind('click', function() {
                var content = target.querySelector('.slideable_content');
                if(!attrs.expanded) {
                    content.style.border = '1px solid rgba(0,0,0,0)';
                    var y = content.clientHeight;
                    content.style.border = 0;
                    target.style.height = y + 'px';
                } else {
                    target.style.height = '0px';
                }
                attrs.expanded = !attrs.expanded;
            });
        }
    }
})
.directive('slider', function () {
    return {
        restrict:'A',
        compile: function (element, attr) {
            // wrap tag
            var contents = element.html();
            element.html('<div class="slideable_content" style="margin:0 !important; padding:0 !important" >' + contents + '</div>');

            return function postLink(scope, element, attrs) {
                // default properties
                attrs.duration = (!attrs.duration) ? '1s' : attrs.duration;
                attrs.easing = (!attrs.easing) ? 'ease-in-out' : attrs.easing;
                element.css({
                    'overflow': 'hidden',
                    'height': '0px',
                    'transitionProperty': 'height',
                    'transitionDuration': attrs.duration,
                    'transitionTimingFunction': attrs.easing
                });
            };
        }
    };
});

See my plunker: http://plnkr.co/edit/Qwwhhf2jGlOT1TgvN2TE?p=preview

How can i get an example like in the UL LI to work? Is there any way for when i call slider-toggle, to pass in ID or class to tell the directive which element to hide/show?

---

UPDATE:

<ul> 
    <li ng-repeat-start="pending in MyData track by $index" slider-toggle  target="pending+$index">
      <p>My list header</p>
          <span slider-toggle>Show</span>    
    </li>
    <li <li ng-repeat-end="" slider id="pending+$index">
      <p>Are to hide and show</p>
    </li>    
</ul>

I've tried {{ pending+$index }} too

Answer 1

You can use IDs for the elements you want to toggle. That would give you much more flexibility:

Directive changes:

.directive('sliderToggle', function($document) { //inject $document, can use document as well but I prefer to stick to the angular services
....
scope: { 
    target: "@"
},
link: function(scope, element, attrs) {
     var target = angular.element($document[0].querySelector("#" + scope.target))[0];
     ....

HTML usage:

<ul>
    <li>
       <p>My list header</p>
       <span slider-toggle  target="test2">Show</span>

    </li>
    <li slider id="test2">
       <p>Are to hide and show</p>
    </li>

</ul>

Plunker

Edit: Changed directive to accommodate your update. This was a bit tricky, since you're compiling the ID dynamically, and when the directive initializes the id is not set yet, therefore it doesn't know of that DOM element. What I did was use $timeout service to make sure the binding occurs after all the elements are loaded:

Updated link directive (also need to inject the $timeout service):

link: function(scope, element, attrs) {


            var timeoutFunc = function () {
              var target = angular.element($document[0].querySelector("#" + scope.target))[0];

              attrs.expanded = false;  
              element.bind('click', function() {

                  var content = target.querySelector('.slideable_content');
                  if(!attrs.expanded) {
                      content.style.border = '1px solid rgba(0,0,0,0)';
                      var y = content.clientHeight;
                      content.style.border = 0;
                      target.style.height = y + 'px';
                  } else {
                      target.style.height = '0px';
                  }
                  attrs.expanded = !attrs.expanded;
              });
            }

            $timeout(timeoutFunc, 0);
        }

HTML needs to be updated as well, use like this: id="{{pending+$index}}". Same for target, you have to use {{}}. By the way, had to change your HTML a bit since you used slide-toggle twice and on the li, that was redundant.

Updated Plunker