Enter link and open dropdown [closed]

Question

Enter link and open dropdown [closed]

Navigation

#1 by (1 votes)

0

I'm trying to do the following: On a page I have several links

<section class="ac-container">
<div>
	<input id="ac-1" name="accordion-1" type="checkbox" />
	<label for="ac-1">About us</label>
	<article class="ac-small">
		<p>Some content... </p>
	</article>
</div>
<div>
	<input id="ac-2" name="accordion-1" type="checkbox" checked />
	<label for="ac-2">How we work</label>
	<article class="ac-medium">
		<p>Some content... </p>
	</article>
</div>
<div><!--...--></div>
</section>

These links lead to a page where there is a dropdown with a headline and a description (attached image)

How can I do that depending on which link I click on, take me to the drop-down page and open one for me?

Let's see if you can help me, because I do not know how I can do it ..

.ac-container{
	width: 400px;
	margin: 10px auto 30px auto;
}

.ac-container label{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	padding: 5px 20px;
	position: relative;
	z-index: 20;
	display: block;
	height: 30px;
	cursor: pointer;
	color: #777;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
	line-height: 33px;
	font-size: 19px;
	background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3), 
		1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
		0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container label:hover{
	background: #fff;
}

.ac-container input:checked + label,
.ac-container input:checked + label:hover{
	background: #c6e1ec;
	color: #3d7489;
	text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,0.3), 
		0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 13px;
	top: 7px;
	background: transparent url(../images/arrow_down.png) no-repeat center center;	
}

.ac-container input:checked + label:hover:after{
	background-image: url(../images/arrow_up.png);
}

.ac-container input{
	display: none;
}

.ac-container article{
	background: rgba(255, 255, 255, 0.5);
	margin-top: -1px;
	overflow: hidden;
	height: 0px;
	position: relative;
	z-index: 10;
	transition: 
		height 0.3s ease-in-out, 
		box-shadow 0.6s linear;
}
.ac-container input:checked ~ article{
	transition: 
		height 0.5s ease-in-out, 
		box-shadow 0.1s linear;
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}

.ac-container article p{
	font-style: italic;
	color: #777;
	line-height: 23px;
	font-size: 14px;
	padding: 20px;
	text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

.ac-container input:checked ~ article.ac-small{
	height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
	height: 180px;
}
.ac-container input:checked ~ article.ac-large{
	height: 230px;
}

<section class="ac-container">
	<div>
		<input id="ac-1" name="accordion-1" type="checkbox" />
		<label for="ac-1">About us</label>
		<article class="ac-small">
			<p>Some content... </p>
		</article>
	</div>
	<div>
		<input id="ac-2" name="accordion-1" type="checkbox" checked />
		<label for="ac-2">How we work</label>
		<article class="ac-medium">
			<p>Some content... </p>
		</article>
	</div>
	<div><!--...--></div>
</section>


//asi quedaria
    <?php
	if(isset($_GET['servicio'])) $servicio = $_GET['servicio']; else $servicio = "";
	?>
   
    
<div id="accordion">
	<h4 class="accordion-toggle"><span><?php if($servicio == "consultoria") echo "-"; else echo "+";?></span><?php echo $titulo1; ?></h4>
	<div class="accordion-content<?php if($servicio == "consultoria") echo " default";?>">

This is the code that I was able to get, I found it in link and it's basically the idea of what I want to do, only when I access this page through a link I want an accordion to open depending on where it comes from.

javascript html5

asked by Antonio Ángel Estrada Pérez 25.05.2018 в 14:49

source

1 answer

Instance abstract classes in Java Subtract hours from a datetime in MySQL

score 1 · Answer 1

You must do it with anchors, adding to the url the id of the section you want to reach, more or less like this:

<a href="servicios.html/#servicio3">Servicio 3</a>

For you to display the section you should do it with javascript, or you can try with css, with the selector: target more or less like that, so that the div next to the anchor (which should be previously hidden with your play: none' or whatever) lights up:

.div:target + div{
 display:block;
}

EDIT: I put a JS solution, try to add this js in the destination page, which will add the class "open" to the id of the url (or whatever is necessary to open it):

$(document).ready(function() {
var destino=window.location.hash.substr(1);
$("#"+destino).addClass("open");
});