--- /dev/null
+function showDetails(id) {
+ document.getElementById(id).style.display = 'block';
+ document.getElementById(id + '_button').style.display = 'none';
+}
+
+function hideDetails(id) {
+ document.getElementById(id).style.display = 'none';
+ document.getElementById(id + '_button').style.display = 'block';
+}
<head>
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'quotes/style.css' %}" />
+ <script src="{% static 'quotes/quotes.js' %}"></script>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
{{ quote.text }}
</p>
- <p class="author">
- — <span class="name"><a href="{% url 'quotes:author' quote.author.id %}">
- {{ quote.author.name }}
- </a></span>
- </p>
+ <div class="details">
+ <p id="details_{{ quote.id}}_button">
+ <a href="" class="show_details"
+ onclick="showDetails('details_{{ quote.id }}'); return false;">
+ Show details</a></p>
+ <div class="hidden_details" id="details_{{ quote.id }}">
+ <p><a href="" class="hide_details"
+ onclick="hideDetails('details_{{ quote.id }}'); return false;">
+ Hide details</a></p>
+ <p class="author">
+ — <span class="name">
+ <a href="{% url 'quotes:author' quote.author.id %}">
+ {{ quote.author.name }}
+ </a>
+ </span>
+ </p>
- {% if quote.tags.all %}
- <p class="tags">
- Tags:
- {% for tag in quote.tags.all %}
+ {% if quote.tags.all %}
+ <p class="tags">
+ Tags:
+ {% for tag in quote.tags.all %}
<a href="{% url 'quotes:tags' tag.id %}" class="tag_link">
{{ tag.tag }}
</a>
- {% endfor %}
- </p>
- {% endif %}
+ {% endfor %}
+ </p>
+ {% endif %}
+ </div> <!-- /hidden_details -->
+ </div> <!-- /details -->
<p class="permalink">
<a href="{% url 'quotes:onequote' quote.id %}">Permalink</a>
</p>