CODEWITHSUNDEEP
javascriptjquerycsshtmlshow-hide
Julie S
Julie S

Reputation: 79

How do I make divs that close and hide on click close from within the div?

Basically, I have code where the user clicks a link, and then a div appears. The user than has to click the same link to make this div disappear. I have eight divs. How do I set it up so that you can click another link within the div to close it, rather than clicking the same link you used to open it? My code is below.

http://www.lovehatecreate.net/iqhomes/jquery-show-hide-plugin-2/index.php

Please ignore the lines that say syntax error. The code still works, I just forgot to upload a file for something not relevant to my question that is on the page.

Thank you!

Upvotes: 2

Views: 1386

Answers (3)

gaurang171
gaurang171

Reputation: 9080

Here i have done complete bins on codebins, please check demo link once.

Demo: http://codebins.com/bin/4ldqp7c

HTML

<div id="links">
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
  <a class="openlink" href="javascript:void(0);">
    Open
  </a>
</div>
<div id="boxes">
  <div class="box">
    <p>
      Here is Content..!! 
    </p>
    <p>
      <a class="closelink" href="javascript:void(0);">
        Close
      </a>
    </p>
  </div>
</div>

jQuery

$(function() {
    var boxClone;

    $(".openlink").click(function() {
        //Clone Dialogbox
        boxClone = $("#boxes").find(".box:eq(0)").clone(true, true);
        var boxOffset = $("#boxes").find(".box:last").position();
        //Set Dialog Position
        if (boxOffset.top == 0) {
            boxOffset.top = 5;
        }
        if (boxOffset.left == 0) {
            boxOffset.left = 60;
        }
        $(boxClone).css('top', (boxOffset.top + 20));
        $(boxClone).css('left', (boxOffset.left + 20));
        $(boxClone).appendTo($("#boxes"));
        $(boxClone).show(500);
    });

    //Close Dialogbox
    $(".closelink").click(function() {
        $(this).closest(".box").remove();
    });

});

CSS

#links{
  float:left;
  width:50px;
  border:1px solid #92a3a7;
  padding:1px;
  background:#88ddfa;
}
#links a{
  dispslay:block;
  text-decoration:none;
  color:#3543ff;
}
#links a:hover{
  text-decoration:underline;
  color:#fd2211;
}
#boxes{
  float:left;
  margin-left:10px;
}
#boxes p{
  text-align:center;
  display:block;
  color:#ccc;
}
#boxes a.closelink{
  text-decoration:none;
  color:#ff2211;
  background:#99cd9a;
  width:40px;
  text-align:center;
  padding:3px;
  font-size:14px;
}
#boxes a.closelink:hover{
  text-decoration:underline;
  background:#a5d9a3;
  color:#2222ff;
}

.box{
  position:absolute;
  width:200px;
  height:200px;
  vertical-align:top;
  border:10px solid #888;
  background:url('http://www.lovehatecreate.net/iqhomes/jquery-show-hide-plugin-2/popupbg.png') #333;
  display:none;

}

Demo: http://codebins.com/bin/4ldqp7c

Upvotes: 0

pdoherty926
pdoherty926

Reputation: 10379

Does this cover your use case?

Excerpt:

$('.show').click(function () {
    var divId = $(this).data('divId');
    $('#' + divId).toggle();
});

$('.hide').click(function () {
    $(this).parent().hide();
});

Upvotes: 3

Paul S.
Paul S.

Reputation: 66364

Give all the <div>s a class indicating they're to be grouped together (only one open at a time), then on link click, hide every element with that class before showing the one for the link you clicked.
If you want to combine this with toggle, get the toggle state before hiding them all, so you know to leave it closed if it was open.

Upvotes: 0

Related Questions