1

First question so be kind ;)

I am trying to refactor this function:

jQuery(document).ready(function( $ ){

      //One
      $('.flip').click(function(){
        var link = $(this);
        $('.panel').slideToggle('slow', function() {
            if ($(this).is(":visible")) {
                 link.text('Close');                
            } else {
                 link.text('Read More');                
            }        
        });        
    });

    //Two
    $('.flip2').click(function(){
        var link = $(this);
        $('.panel2').slideToggle('slow', function() {
            if ($(this).is(":visible")) {
                 link.text('Close');                
            } else {
                 link.text('Read More');                
            }        
        });        
    });

    //Three
    $('.flip3').click(function(){
        var link = $(this);
        $('.panel3').slideToggle('slow', function() {
            if ($(this).is(":visible")) {
                 link.text('Close');                
            } else {
                 link.text('Read More');                
            }        
        });        
    });

    //Four
    $('.flip4').click(function(){
        var link = $(this);
        $('.panel4').slideToggle('slow', function() {
            if ($(this).is(":visible")) {
                 link.text('Close');                
            } else {
                 link.text('Read More');                
            }        
        });        
    });

    //Five
    $('.flip5').click(function(){
        var link = $(this);
        $('.panel5').slideToggle('slow', function() {
            if ($(this).is(":visible")) {
                 link.text('Close');                
            } else {
                 link.text('Read More');                
            }        
        });        
    });

    //six
    $('.flip6').click(function(){
        var link = $(this);
        $('.panel6').slideToggle('slow', function() {
            if ($(this).is(":visible")) {
                 link.text('Close');                
            } else {
                 link.text('Read More');                
            }        
        });        
    });

    //Seven
    $('.flip7').click(function(){
        var link = $(this);
        $('.panel7').slideToggle('slow', function() {
            if ($(this).is(":visible")) {
                 link.text('Close');                
            } else {
                 link.text('Read More');                
            }        
        });        
    });

    //Eight
    $('.flip8').click(function(){
        var link = $(this);
        $('.panel8').slideToggle('slow', function() {
            if ($(this).is(":visible")) {
                 link.text('Close');                
            } else {
                 link.text('Read More');                
            }        
        });        
    });

    //Nine
    $('.flip9').click(function(){
        var link = $(this);
        $('.panel9').slideToggle('slow', function() {
            if ($(this).is(":visible")) {
                 link.text('Close');                
            } else {
                 link.text('Read More');                
            }        
        });        
    });


    //Ten
    $('.flip10').click(function(){
        var link = $(this);
        $('.panel10').slideToggle('slow', function() {
            if ($(this).is(":visible")) {
                 link.text('Close');                
            } else {
                 link.text('Read More');                
            }        
        });        
    });





    });

I want it to be just one fuction that can do this. Where should I turn? What article should I read? I am really stuck on this!

Cheers,

Edit:

This is the HTML:

<!-- section six -->
<h3 class="text-center">How to use promotional feather banners?</h3>
Feather banners are a brilliant way to guide people around your business premises, or liven up a local event with some custom advertising. These flags are very quick to set up — use them to transform a space in minutes.
<div class="panel6">

These branded flags can be used in a cluster or on their own — depends on the effect you want to create. A single large flag can make a good impression on people passing by on foot or in their cars, whereas a cluster of smaller or medium flags can make a nice walkway through a retail forecourt, or show people where to walk at a large event. All our flags come in a range of sizes and sets to suit different budgets — just speak to one of the team who can take you through all the different options.

Businesses that need to grab people’s attention fast often opt for flag advertising — real estate agents, food retailers, and car dealerships being just some of our regular flag customers. <strong>Our flags help Aussie businesses really stand out against their competition.</strong>

Our flag bases and poles are all sold separately — we will help you find the right flag bundle for your needs. We stock both hard ground and soft ground feather flag kits so that you are always prepared for any event or eventuality. See for yourself how easy they are to set up and install.

<center><button class="trigger-btn trigger-1250" style="padding: 10px;">Enquire today for some great offers</button></center>
<div class="text-center"><strong>Flag us down and speak to an expert on 1300 556 589</strong></div>
&nbsp;

</div>

<p class="flip6">Read More</p>


<hr />

<!-- section six end -->
3
  • How is .flipN and .panelN related? Is one a parent of the other? I'm also assuming that each one is a single element, in which case all of them should be the same class, as they exhibit the same behavior. Commented Jun 20, 2017 at 19:34
  • Hi Patrick - .flipN is a link so when user clicks the .panelN will expand or shrink :) Commented Jun 20, 2017 at 19:35
  • 3
    This would probably better off on codereview.stackexchange Commented Jun 20, 2017 at 19:35

1 Answer 1

4

you can do it in one click event if you will give all of the flip elements the same class, and bind each panel to the correct flip by some attribute.

for example, in that given html:

<a class="flip" id="flip1 ">flip 1</a>
<a class="flip" id="flip2">flip 2</a>
<div class="panel panel1" data-id="flip1"></div>
<div class="panel panel2" data-id="flip2"></div>

It possible now to run only 1 click event to this action

$('.flip').click(function(){
    var link = $(this);
    var id = $(this).attr("id");
    // use the attribute data-id to find the element.
    $('.panel[data-id='+ id +']').slideToggle('slow', function() {
        if ($(this).is(":visible")) {
             link.text('Close');                
        } else {
             link.text('Read More');                
        }        
    });        
});
Sign up to request clarification or add additional context in comments.

3 Comments

link will be undefined .. also you need to check if panel is visible or not .. not the current flip
true, i wanted to answer what he asked. how to make the function written once.
Thanks for this answer I will give it a shot!

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.