CODEWITHSUNDEEP
javascriptjqueryhtmlcss
k_rollo
k_rollo

Reputation: 5472

Expand and Collapse with Slide Animation

I intend to have a clickable text with sliding animation. I currently have this:

JavaScript: (expand-collapse.js)

$(document).ready(function() {
    $(".content").hide();

    $(".heading").click(function() {
        var header = $(this);

        header.next(".content").slideToggle(250);
    });
});

HTML:

<head>
    <style>
        .heading {
            cursor: pointer;
            font-weight: bold;
        }
    </style>

    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/expand-collapse.js"></script>
</head>

<body>
    <div class="heading">VIEW SEAT MAP (EXPAND / COLLAPSE)</div>
    <img class="content" src="images/seatmap.png" width="500" height="300" alt="seatmap">
</body>

Output:
enter image description here

So far, it expands and collapses as it should, but instead of having a static text that says

VIEW SEAT MAP (EXPAND / COLLAPSE)

all the time, I prefer it to say

VIEW SEAT MAP (EXPAND)
VIEW SEAT MAP (COLLAPSE)

accordingly, with only the EXPAND and COLLAPSE text being clickable like an <a href> (as opposed to the entire heading div). I am very new to JS.

Upvotes: 1

Views: 1603

Answers (2)

k_rollo
k_rollo

Reputation: 5472

This is just to show how I went about the final output with the help of DeeMac's answer (which was Marked as Accepted).

JavaScript: (expand-collapse.js)

$(document).ready(function() {
    $(".content").hide();

    $(".slide-toggle").click(function() {
        $(this).parent().next(".content").slideToggle(250);
        $(this).text() == 'EXPAND' ? $(this).text('COLLAPSE') : $(this).text('EXPAND');
    });
});

HTML:

<head>
    <style>
        .slide-toggle {
            color: blue;
            cursor: pointer;            
            text-decoration: underline;
        }
    </style>

    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/expand-collapse.js"></script>
</head>

<body>
    <strong>VIEW SEAT MAP (<span class="slide-toggle">EXPAND</span>)</strong>
    <img class="content" src="images/seatmap.png" width="500" height="300" alt="seatmap">
</body>

Upvotes: 1

user1017882
user1017882

Reputation:

Add an a to heading:

<div class="heading">VIEW SEAT MAP <a class="slide-toggle">EXPAND</a></div>

Handle the click event of the new a and set the text accordingly: 

 $(document).ready(function() {
    $(".content").hide();

    $(".slide-toggle").click(function() {

         $(this).parent().next(".content").slideToggle(250);

         if($(this).text() == 'EXPAND')
         {
             $(this).text('COLLAPSE');
         }
         else
         {
             $(this).text('EXPAND');
         }
    });
 });

NOTE: I've kept this very simple for you and just incorporated the changes into what you already have. There may be better overall approaches and little bits of syntactic sugar (shorthand if statements, for example) but I've kept it simple for now.

Upvotes: 2

Related Questions