Replace DIV with JQuery passing parameters

Question

I'm having a problem here to create a generic function on JQuery for my "boxes".

I have a visible box with contents, but I will have some other boxes(all DIVs) with another contents and forms. It can be just a DIV ou a full scructured content.

For exemple, a structure like this:

| DIV CONTAINER
|---- DIV CONTACT FORM
|---- ---- DIV RESET PASSWORD
|---- DIV RESET PASSWORD
|---- DIV SIGN UP FORM
|---- DIV RULES
|---- TERMS

Right now I'm doing the box exchanging manually like this code:

$( "#contact-form-link" ).on( "click", function()
{
    $( "#contact-form-link" ).fadeOut( "normal", function()
    {
        $( "#reset-password-form" ).fadeIn( "normal" );
    });
});

$( "#reset-password-form" ).on( "click", function()
{
    $( "#reset-password-form" ).fadeOut( "normal", function()
    {
        $( "#contact-form-link" ).fadeIn( "normal" );
    });
});

It's unecessary so much code!

I would like to create a function with parameters, so, I can call it from a LINK inside any part of the current box.

A function like:

function exchangeBoxes(box_fadeout,box_fadein) 
{
    $("box_fadeout").on("click", function()
    {
        $("box_fadeout").fadeOut( "normal", function()
        {
            $("box_fadein").fadeIn( "normal" );
        });
    });
};

So this way, I can call this function from a link passing which DIV will fadeOut and which will fadeIn.

I'm in #contact-form and want to change to #reset-password-form?

<a href="#void" onclick="exchangeBoxes(contact-form, password-form);">Click Here</a>

I need to be able to call the function from any link, anywhere on the page, WITHOUT setting a ID or CLASS for the link, only for the DIVS.

I'm using one function inside another so the IN page only loads when the OUT page is done.

ONLY ONE div can be displayed at time. When one fades out, the other one called will fadeIN. Always callig by the ID, never by CLASS.

Any help to create this generic function is welcome!

Thanks!

guest271314 · Accepted Answer · 2016-12-19 05:01:11Z

You can attach the event to parent div, check id of element at click event, pass the element as either first or second parameter to exchangeBoxes depending on the id of the element.

function exchangeBoxes(a, b) {
  $(a).fadeOut( "normal", function() {
    $(b).fadeIn( "normal" );
  });
}

var elems = ["contact-form-link", "reset-password-form"];

$("#container").on("click", "[id]", function(e) {
  if (this.id === elems[0]) {
    exchangeBoxes("#" + elems[0], "#" + elems[1])
  }
  if (this.id === elems[1]) {
    exchangeBoxes("#" + elems[1], "#" + elems[0])
  }
});

or use multiple selectors when assigning click event

var elems = ["contact-form-link", "reset-password-form"];

$("#contact-form-link, #reset-password-form")
.on("click", function(e) {
    exchangeBoxes(this, "#" 
    + elems.filter(function(id) {return id !== e.target.id})[0])

});

Mikey · Accepted Answer · 2016-12-19 05:25:08Z

You could attach a class e.g. exchange to your link and use a data attributes to store the ID of the elements you want to fade in and out.

<a class="exchange" href="#" data-out="#contact-form" data-in="#reset-password-form">Click Here</a>

<a class="exchange" href="#" data-out="#reset-password-form" data-in="#contact-form">Click Here</a>

Then attach an event handler

$(".exchange").on("click", function () {
    var data = this.dataset;
    $(data.out).fadeOut("normal", function () {
        $(data.in).fadeIn("normal");
    });
});

If you strictly only focusing on those two DIVs, you could also use fadeToggle() without having to use data attributes

$(".exchange").on("click", function () {
    $('#contact-form').fadeToggle("normal", function () {
        if ($(this).is(':visible')) {
            $("#reset-password-form").fadeOut("normal");
        } else {
            $("#reset-password-form").fadeIn("normal");
        }
    });
});

Brad · Accepted Answer · 2016-12-19 05:28:23Z

In addition to the answer above, you can also acheive this without using inline onclick. I prefer to keep the javascript separate.

Give each link a data-link with the box they link to. e.g.

<a href="#" data-link="#box2">Go to box 2</a>

Then in js you can pick this up and do the required fade in/out as per the example:

p.s. sorry for the css I'm really bored with nothing better to do.

$(".box a").click(function() {
  linkTo = $(this).data("link");
  $(this).parent().fadeOut("normal", function() {
    $(linkTo).fadeIn();
  });
});

body {
  background: #333;
  color: #ccc;
  font-family:sans-serif;
}
.box {
  margin: 0 auto;
  width: 300px;
  border: 1px solid #ccc;
  text-align: center;
  display:none;
}

.box a {
  text-decoration: none;
  color: #ccc;
  border:1px solid #ccc;
  padding: 10px;
  margin: 0 0 10px 0;
  display: inline-block;
}

.box a:hover {
  background: #333;
  color: #ccc;
}

#box1 {
    background: #CD5C5C;
    display:block;
}

#box2 {
    background: #6B8E23;
}

#box3 {
    background: #6A5ACD;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">

  <div class="box" id="box1">
    <h3 class="title"> I am Box 1 </h3>
    <a href="#" data-link="#box2">Go to box 2</a> 
    <br>
    <a href="#" data-link="#box3">Go to box 3</a>
  </div>

  <div class="box" id="box2">
    <h3 class="title"> I am Box 2 </h3>
    <a href="#" data-link="#box1">Go to box 1</a> 
    <br>
    <a href="#" data-link="#box3">Go to box 3</a>
  </div>

  <div class="box" id="box3">
    <h3 class="title"> I am Box 3 </h3>
    <a href="#" data-link="#box1">Go to box 1</a> 
    <br>
    <a href="#" data-link="#box2">Go to box 2</a>
  </div>

</div>

kold-kreator · Accepted Answer · 2016-12-19 11:32:20Z

Well, thank you all!

I put all responses together and came up with this:

<div id="contact">
    <h3>CONTACT</h3>
    <p>My form</p>
    <a href="javascript:void(0)" onclick="exchangeBoxes('contact', 'reset')">Reset Password</a>
    <a href="javascript:void(0)" onclick="exchangeBoxes('contact', 'about')">About</a>
</div>

<div id="reset" style="display:none">
    <h3>RESET</h3>
    <p>Reset password form</p>
    <a href="javascript:void(0)" onclick="exchangeBoxes('reset', 'contact')">Back to contact</a>
</div>

<div id="about" style="display:none">
    <h3>ABOUT</h3>
    <p>Some info.</p>
    <a href="javascript:void(0)" onclick="exchangeBoxes('about', 'contact')">Back to contact</a></li> 
</div>

And the JQuery very clean:

function exchangeBoxes(a, b)
{
    var a = "#" + a;
    var b = "#" + b;

    $(a).fadeOut( "normal", function()
    {
        $(b).fadeIn( "normal" );
    });
}

Thank you very much, guys!

Collectives™ on Stack Overflow

Replace DIV with JQuery passing parameters

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related