You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.3 KiB
73 lines
2.3 KiB
{% extends 'base.html' %}
|
|
|
|
{% block menuapp %}
|
|
|
|
{% endblock menuapp %}
|
|
|
|
{% block content %}
|
|
<div class="container-xl">
|
|
<style>
|
|
body { font-family: Arial, sans-serif; }
|
|
.apartado {
|
|
margin-bottom: 20px;
|
|
background-color: #ffffff; /* Fondo blanco para el bloque del apartado */
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
.titulo-apartado { font-size: 1.5em; font-weight: bold; margin-top: 20px; }
|
|
|
|
.item { margin-bottom: 10px; }
|
|
.titulo-item {
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
padding: 10px;
|
|
background-color: #ffffff;
|
|
border: 1px solid #ddd;
|
|
color: #008000; /* Verde */
|
|
}
|
|
.descripcion-item {
|
|
display: none;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-top: none;
|
|
}
|
|
</style>
|
|
|
|
<h1>Centro de ayuda</h1>
|
|
|
|
{% for code, nombre in apartados %}
|
|
<div class="apartado">
|
|
<div class="titulo-apartado">{{ nombre }}</div>
|
|
{% for item in elementos %}
|
|
{% if item.apartado == code %}
|
|
<div class="item">
|
|
<div class="titulo-item" onclick="toggleDescripcion(this)">{{ item.titulo }}</div>
|
|
<div class="descripcion-item">{{ item.descripcion|safe }}</div>
|
|
</div>
|
|
{% endif %}
|
|
{% empty %}
|
|
<p>No hay elementos en esta sección.</p>
|
|
{% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<script>
|
|
// Función para mostrar/ocultar la descripción al hacer clic en el título
|
|
function toggleDescripcion(element) {
|
|
const descripcion = element.nextElementSibling;
|
|
if (descripcion.style.display === "none" || descripcion.style.display === "") {
|
|
descripcion.style.display = "block";
|
|
} else {
|
|
descripcion.style.display = "none";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="row g-3 mb-4 align-items-center justify-content-between">
|
|
<div class="col-auto">
|
|
<a class="btn app-btn-secondary" href="{% url 'principal' %}">Volver al inicio</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|