jQuery toggle child visibility

Question

I am in a serious bind. I want to toggle the visibility of some elements I am pulling from an API. The API allows me to make a get request for stories and I am pulling the headlines and images. I can get up to 15 requests at a time from the API. What I want to do is show one request at a time and not all of them at once. When I make the request I get them all at once.

I was thinking of putting the images and headlines into a list and making each child visible one at a time. My jQuery code is below:

var main = function () {
    var url = 'http://devapi.xxxxxxx.com/v1/en/stories/latest?format=json&apikey=xxxxxxxxxxxxxxxx';

    $.getJSON(url, function(xxxxxx_response) {
        //console.log(xxxxx_response);

        xxxxxxxxxx_response.stories.forEach(function(data) {
            console.log(data);

            var $img = $("<img>");
            var $p = $("<p>");


            $img.attr({
                "src": data.largeimage,
                "hidden": true,
                "id": []
                });
            $p.attr("hidden", true).append(data.title['#cdata-section']);

            $("main .story").append($img, $p);

            $("button").click(function(img, p) {
                //$img.attr('hidden', false);
                //$p.attr('hidden', false);

                //s$img.slideToggle('slow');
                $img.attr('hidden', false);
                $p.attr('hidden', false);

            });
        });
    });
}

$(document).ready(main);

And here is my HTML:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="">
        <title>Media on the Move</title>
        <style type="text/css">
            img {
                width: 360px;
                heigh: auto;
            }

        </style>

    </head>
    <body>
        <main>
            <button>Next</button>   
            <div class="story"></div>
        </main>

        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="lib/app.js"></script>
    </body>

</html>

Please help!!!

You can do this by creating an iterative js function. I have answered a question similar to yours [here](http://stackoverflow.com/a/27201872/3190165). If you need more assistance, ask me. — Gaurav Kalyan, Nov 30 '14 at 07:20
Hey man. Thanks for the comment. I'm struggling trying to utilize this with my code. Please help. — Siya, Nov 30 '14 at 07:31

Gaurav Kalyan · Accepted Answer · 2014-11-30T08:16:35.153

Create your function like this:-

store all the stories in the array, let's suppose story_list and length of story_list in length_story.
Then create an iterative function as follow

function nestedStoryShow(array1 , length1){ //terminating codition if (length1 == 0){ return; } else{ var $img = $("<img>"); var $p = $("<p>"); $img.attr({ "src": array1[array1.length- length1].largeimage, "id": [] }); $p.append(array1[array1.length- length1].title['#cdata-section']); $("main .story").append($img, $p); setTimeout( function() { $img.hide(); $p.hide(); nestedStoryShow(array1 , length1-1); }, 3000);/*Your Story stays for 3 second and then it is hidden*/ } }

Attach this function to your button after the ajax call has been successful recieved.

success:function(data){ story_list //array of story length_story //length $(button).click(function(){ nestedStoryShow(story_list,length_story); }); }

jQuery toggle child visibility

1 Answers1