Simplify multiple function for each IDs
<p>I created a simple code that slides-in and out the toggled image using JQuery and CSS. I used multiple functions to hide/toggle the others when you click another image. Is there a way to minimize the usage of this?. Plus, when I click a different image for a third time, I have to double-click before it slides back. My code.. and its <a href="https://jsfiddle.net/166sb7ys/" rel="nofollow noreferrer" title="JSFiddle">JSFiddle</a></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head lang="en"&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"&gt;
    &lt;/script&gt;
    &lt;script&gt;
        $(document).ready(function () {
            $("#img1").toggle(
                    function () {
                        $("#img1").css({"transform": "translate3d(-100px, 0px, 0px)"});
                        $("#img2").css({"transform": "translate3d(0px, 0px, 0px)"});
                        $("#img3").css({"transform": "translate3d(0px, 0px, 0px)"});
                    },
                    function () {
                        $("#img1").css({"transform": "translate3d(0px, 0px, 0px)"});
                    }
            );
            $("#img2").toggle(
                    function () {
                        $("#img2").css({"transform": "translate3d(-100px, 0px, 0px)"});
                        $("#img1").css({"transform": "translate3d(0px, 0px, 0px)"});
                        $("#img3").css({"transform": "translate3d(0px, 0px, 0px)"});
                    },
                    function () {
                        $("#img2").css({"transform": "translate3d(0px, 0px, 0px)"});
                    }
            );
            $("#img3").toggle(
                    function () {
                        $("#img3").css({"transform": "translate3d(-100px, 0px, 0px)"});
                        $("#img2").css({"transform": "translate3d(0px, 0px, 0px)"});
                        $("#img1").css({"transform": "translate3d(0px, 0px, 0px)"});
                    },
                    function () {
                        $("#img3").css({"transform": "translate3d(0px, 0px, 0px)"});
                    }
            );
        });
    &lt;/script&gt;
    &lt;/head&gt;
    &lt;title&gt;&lt;/title&gt;
    &lt;style&gt;
        .cardcont img {
            transition: transform .2s ease-in-out;
        }
        .cardcont #img1 {
            position:absolute;
            left:0;
            top:0;
            z-index:-1;
        }
        .cardcont #img2 {
             position:absolute;
             left:200px;
             top:0;
             z-index:-1;
         }
        .cardcont #img3 {
            position:absolute;
            left:400px;
            top:0;
            z-index:-1;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="cardcont"&gt;
    &lt;img src="http://i65.tinypic.com/fokk9j.jpg" id="img1"/&gt;
    &lt;img src="http://i65.tinypic.com/fokk9j.jpg" id="img2"/&gt;
    &lt;img src="http://i65.tinypic.com/fokk9j.jpg" id="img3"/&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>