我可以使切换链接在点击时消失吗？

Question

I've applied the toggle function so that when a user clicks on, say, "Show More", a bunch of further HTML shows up. For now a re-click makes the revealed HTML disappear. I know I can change it so that the toggle text changes to "Show Less", but that's not what I want. What I want is for the "Show More" toggle to completely disappear, and ideally for the revealed HTML to appear not below where the toggle text was, but over top of it, in its place. Is this possible? I've done a fair bit of searching but can't find an answer.

I've got the basics so far:

<a href="javascript:toggletext('mytext')"><p>Show More</p></a>
<div id="mytext" style="display: none;">
blah blah text and images blah blah
</div>

and

<script>
    function toggletext(cid) {
        if (document.getElementById(cid).style.display == "none") {
            document.getElementById(cid).style.display = "block";
        } else {
            document.getElementById(cid).style.display = "none";
        };
    }
</script>

As a side note, the revealed HTML has images in it. I'd prefer them not to preload. Is that a default, or would I have to specify this?

Thanks in advance for any help. (And my apologies if this answer exists elsewhere.)

Answer 1

There are many ways you can do this.

• Quick demo: http://jsfiddle.net/f8bd2gbh/

• Demo 2 http://jsfiddle.net/odwfcp83/ - (with API: slideToggle - http://api.jquery.com/slidetoggle/ )

• Demo 3 : http://jsfiddle.net/Xam9q/ --> ( How do I call show/hide function independently )

You are missing few things so I would recommend read more. href is hyperlink reference you can attach events in the tag. with a tag use preventDefault to avoid any default behaviour.

You can even look for animate API. there is Jquery show / less plugin as well.

Hope this demo gives you direction and one of the way tou can resolve it. :)

What the code is doing below

• On click event of a tag it checks for is(":visible") and adjust the show and hide accordingly.

One of many code sample:

  $("#hulk").click(function () {

      if ($("#mytext").is(":visible")) $("#mytext").hide()
      else $("#mytext").show();
  });

HTML

<a id="hulk"><p>Show More</p></a>

<div id="mytext" style="display: none;">blah blah text and images blah blah</div>

Answer 2

your html should look like this:

<div id="data_to_show">
  <button id="show_data">Show More+</button>
  <p id="data_p" style="display:none;">
    some data to show here... 
  </p>
</div>

and the javascript:

$(function(){
  $('#show_data').click(function(){
    $('#show_data').hide();
    $('#data_p').show();
  });
});

please note, in this example there is no way to "show less" because you wanted the button to disappear.

Answer 3

If you want "show more" to appear below, you can simply move your <a> tag below <div> tag.

For the toggle you should use jQuery as it will make your life easier.

HTML

<div id="mytext" style="display: none;">
    blah blah text and images blah blah
</div>
<a id="trigger" href="javascript:void(0);"><p>Show More</p></a>

JAVASCRIPT

$('#trigger').bind('click', function(){
    $(this).hide();
    $('#mytext').show();
});

As for the images, it's a matter of browser. Some modern browsers do not preload images when display is set to none.