How do I hide and show the contents contents of a

问题:

In my modal, I have a link. The link is written as follows:

<%= link_to "HIDE DETAILS", '#', class:'right' %>

When I click on that link, I want the link to display "SHOW DETAILS" instead of "HIDE DETAILS" and the div with id= "details" should disappear off the view with all its children. And when the link is clicked again, the link shows "HIDE DETAILS" and the contents of the div with details to show and vice-versa (toggle functionality). And when the page is first displayed, I want the div with details and all its content to initially not show and the link should display "SHOW DETAILS". How do I write the Javascript to do this ? It must be really simple.

Here is the div:

<div id="details">
   <ul class="errors"></ul>
   <div style="float:left; margin-right:0.5em; color: #860038"><i>media type:      </i></div><%= @image.media_type %>
   <br>
   <div style="float:left; margin-right:0.5em; color: #860038"><i>subject:   </i></div> <%= @image.subject %>
   <br>
   <div style="float:left; margin-right:0.5em; color: #860038"><i>title: </i></div> <%= @image.title %>
   <br>
   <div style="float:left; margin-right:0.5em; color: #860038"><i>full description: </i></div>
   <%= @image.description %>
   <br>
   <div style="float:left; margin-right:0.5em; color:#860038;"><i>location: </i></div>
   <%= @image.location %>
   <br>
   <div style="float:left; margin-right:0.5em; color: #860038;"><i>date: </i>  </div>
   <br>
   <div style="float:left; margin-right:0.5em; color: #860038;"><i>author: </i></div>
   <%= @image.author %>
   <br>
   <div style="float:left; margin-right:0.5em; color: #860038;"><i>source: </i></div>
   <%= @image.source %>
   <br>
   <div style="float:left; margin-right:0.5em; color:#860038;"><i>tags: </i>   </div> <%= @image.tag_list.join(' - ') %>
   <br>
   <br>
   <div style="float:left; margin-right:0.5em; color:#009345;">This item is shared by</div><span style="color:#0F004E;"><%= @image.user.name_first+ ' ' %>    </span><span style="color:#860038;"><%=@image.user.name_last %><br><br>
   <%= link_to "Edit Item", '#', class: "btn btn-lg btn-primary"  %>
</div>

回答1:

Very simple..just use Toggle

example:-

//erb code
<h1 id="title">Toggle div onclick</h1>

<a class="right" href="javascript:void(0);" title="Toggle me">
  <span id="toggle-text">SHOW</span> DETAILS
</a>
<div id="details" style="display:none;">


//js code
$('.right').on("click", function() {
  //toggle the div
  $("#details").toggle();
  //update the text too
  if ($("span#toggle-text").html() == "SHOW") {
    $("span#toggle-text").html("HIDE");
  } else {
    $("span#toggle-text").html("SHOW");
  }
});

CHECK THIS FIDDLE

回答2:

Try this HTML:

      <button id="myButton"> Click</button>
      <div id="myDiv">Hello</div>

And this JS:

    $("#myButton").click(function(){
            $("#myDiv").toggle();
    });

To have it initially hidden, use this css:

<style>

    #myDiv{
        display: none;
    }

</style>

回答3:

If you want more specific answer.

Given:

<%= link_to "HIDE DETAILS", '#', class:'right' %>

Try:

$('.right').click(function(evt) {
  evt.preventDefault();
  $link = $(this);
  $detail = $('#details'); 
  if ($link.text() == "SHOW DETAILS") {
    $link.text("HIDE DETAILS");
  } else {
    $link.text("SHOW DETAILS");
  }
  $detail.toggle();   
}

UPDATED: If the links are in modal then you need to attach event listener dynamically, something like this:

$.fn.attachToggle = function() {
    $(this).click(function(evt) {
      evt.preventDefault();
      $link = $(this);
      $detail = $('#details'); 
      if ($link.text() == "SHOW DETAILS") {
        $link.text("HIDE DETAILS");
      } else {
        $link.text("SHOW DETAILS");
      }
      $detail.toggle();   
    }
}

Then call attachToggle on modal body eg: $([modal_body_id]).find('.right').attachToggle();

回答4:

It's easy, instead of using the link_to rails helper, use a simple link element, since you won't need to go to a rails view you don't need the rails helper, but in case you need it, just use ERB:

<a href="{%= view_path %}">Go!</a>

Now, in your case, you just need to use jQuery to:

1. Change the link text (toggle the text)
2. Show/hide your content details

You can do something like this to do it, very simple:

$("#theLink").click(function() {
  var link = $(this);
  var content = $('.details');
  
  if (link.text() === 'Show Details') {
    link.text('Hide Details');
    content.css('display', 'block');
  } else {
    link.text('Show Details');
    content.css('display', 'none');
  }
});

a {
  font-family: sans-serif;
  font-weight: 700; 
  text-decoration: none;
  color: peru;
}

.details {
  font-family: Arial, sans-serif;
  color: white;
  background: tomato;
  padding: 20px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" id="theLink">Show Details</a>
<div class="details">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi fugit iusto consequuntur distinctio omnis sint similique provident. Assumenda, est? Cumque inventore blanditiis officia corrupti voluptate qui quasi quae recusandae accusamus.
</div>