0

My problem is currently that I'm making a newsfeed with certain small articles. All the articles have the same class, which is logic. Every article has on the top right side a arrow which is poiting down.

I want if people click on the arrow (which is an .svg-file) the content expand. The container has a height of 78px and if the button is clicked it should expand so the height should be auto then.

My problem is that I have no idea what to do in what language. jQuery or what I've read is JS.. because if I click normally on the button, everything with that class will expand, or get the auto height css. I only want that 1 container expands. I think some active element or focus method? I have no idea.

EXAMPLE

This is a title

August 1, 2014 at 13:37

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

HTML

<article class="newsfeed_item">
<img src="../images/arrow_down.svg" alt="" class="expand" />
<div class="newsfeed_image"><img src="../images/example-img.jpg" alt="" /></div>
<h1>This is a title</h1>
<footer class="extra_info">August 1, 2014 at 13:37</footer>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

CSS

article.newsfeed_item               {border-bottom:1px solid #ccc; width:100%; height:78px; clear:both; position:relative; overflow:hidden;}
article.newsfeed_item h1            {}
article.newsfeed_item p             {padding-bottom:5px; line-height:16px;}
article.newsfeed_item .expand       {height:20px; position:absolute; top:10px; right:0; padding:0 5px;}
article.newsfeed_item .expand:hover {cursor:pointer; background:#a2c139;}
.expanded                           {height:auto;}
footer.extra_info                   {font-family:"GudeaRegular"; font-size:10px; color:#999;}

any help how it can expand smoothly while a user clicks the image with the class "expand"? Help is appreciated.

2 Answers 2

0

Edit: New answer that should work better.

HTML

`<div id='newsbox'><img id='toggler'>toggle me</div>`

JS

$("#toggler").click(function(){
    $("#newsbox").animate({height:50 - $("#newsbox").height()},200);
});

Also, still don't forget to include jQuery <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

0

You can use jQuery for that.

I made you this function that toggles the view, meaning first click it shows more, second click, it shows less. The function is triggered by the on('click', ... ) part.

Normally you would animate it setting the height to auto, but that doesn't work. So we first need to know what the actual height is. For that we set the CSS height to auto, than grab the height, and reset it to the original height. Then we animate it.

$(document).ready( function() {
    $("img.expand").on('click', function() {
        var p = $(this).parent();
        var currentHeight = p.height();

        if( currentHeight == 78 ) {
            p.height('auto'); /* set to auto */
            var newHeight = p.height(); /* get the actual height */
            p.height( currentHeight ); /* reset the height */
        }
        else {
            var newHeight = "78px";
        }
        $(this).parent().animate({ height : newHeight }, 1000);
    });    
});

Also, see this DEMO.


If you only want it to expand, and not to toggle, then you can take away some lines and use this code:

$(document).ready( function() {
    $("img.expand").on('click', function() {
        var p = $(this).parent();
        var currentHeight = p.height();
        var newHeight = p.height('auto').height(); 
        p.height( currentHeight );        
        $(this).parent().animate({ height : newHeight }, 1000);
    });    
});

Also with a DEMO.

1
  • Well the second one does work. The first one not. Can you fix that? I really would love the Toggle. Sep 3, 2014 at 18:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.