how to initialize with the image shown and not hidden

[hugonakamura]

I am trying to find ways to make the default state for the images as shown and give the user the option to hide

[darrenshrwd]

Any luck? I would like to do this also.

[DanielTibbing]

I solved this by adding an attribute on the slideable called "showOnLoad" and then upon initialization check wether or not this is set. If it is, I set the height to 100%

Here's the code:

angular.module('myApp.services', [])
.directive('slideable', function () {
    return {
        restrict:'C',
        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;
                var startHeight = "0px";
                if (attrs.showonload) {
                    startHeight = '100%'
                }
                element.css({
                    'overflow': 'hidden',
                    'height': startHeight,
                    'transitionProperty': 'height',
                    'transitionDuration': attrs.duration,
                    'transitionTimingFunction': attrs.easing
                });
            };
        }
    };
})
.directive('slideToggle', function() {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var target, content;
            attrs.expanded = (attrs.expanded==="true") ? true : false;

            element.bind('click', function (e) {
                if (!attrs.slideToggle) {
                    if (!target) target = $(this).parent().find(".slideable")[0];
                } else {
                    if (!target) target = document.querySelector(attrs.slideToggle);
                }
                if (!content) 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;
            });
        }
    }
});

[dela1000]

~~Hi. New to angular directives. I have the original code working well on my site. However I do need to implement this version. How do I add the showonload attr to the template? Or in other words, how do I use this code? Do I have to add showonload as a class <div class="showonload" >, or like this <div showonload" >, or an element <show-on-load> </show-on-load>?~~

Actually, I just figured out how to add it on the template <div class="slideable" showonload="true" >

However when I add the code to the JSFiddle example, it shows the text on load, but it does not animate until the h1 is clicked twice and then it opens it. How do you think you can add the showonload function to set the original height to 100% on the element on load, and trigger the effect on the first click?

Thanks for the great code!

[jwams]

I have the same problem above, does anyone have a fix?

[DanielTibbing]

@jwams it was a long time ago i used this, and i dont have any code left for it. Just took a quick look at the code and the reason you have to click twice is because you dont have attrs.expanded set, which is going to default to false.

To fix this you can set expanded="true" like this:

<h1 slide-toggle="#derp" expanded="true" >Click here for Hipster Ipsum.</h1>

and then it will activate on the first click.

I didn't however get it to animate properly on the first click, and cant spend a lot of time on it at the moment. But maybe you can work on it from there :)