I’m trying to build an accessible accordion with separate navigation and find that when focusing the input that controls the state of the pane, it scrolls down the page.
(($) => {
$(document).on('focus', 'input', (e) => e.preventDefault());
})(jQuery);.row {
display: flex;
gap: 2rem;
.col {
&:first-child {
flex: 1 0 20%;
}
&:last-child {
& > div {
grid-template-rows: 1fr;
opacity: 1;
display: grid;
transition: grid-template-rows 250ms ease, opacity 250ms ease;
div {
overflow: hidden;
}
}
input {
position: absolute;
left: -100%;
opacity: 0;
&:not(:checked) {
& + div {
grid-template-rows: 0;
opacity: 0;
}
}
}
}
}
}
ul {
margin: 0;
padding: 0;
list-style: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="row">
<div class="col">
<ul>
<li><label for="category-1">Category 1</label></li>
<li><label for="category-2">Category 2</label></li>
<li><label for="category-3">Category 3</label></li>
<li><label for="category-4">Category 4</label></li>
<li><label for="category-5">Category 5</label></li>
<li><label for="category-6">Category 6</label></li>
</ul>
</div>
<div class="col">
<input type="radio" checked="checked" name="category" id="category-1" value="category-1">
<div>
<div>
<h2>Category 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
</div>
</div>
<input type="radio" name="category" value="category-2" id="category-2">
<div>
<div>
<h2>Category 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
</div>
</div>
<input type="radio" name="category" value="category-3" id="category-3">
<div>
<div>
<h2>Category 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
</div>
</div>
<input type="radio" name="category" value="category-4" id="category-4">
<div>
<div>
<h2>Category 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
</div>
</div>
<input type="radio" name="category" value="category-5" id="category-5">
<div>
<div>
<h2>Category 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
</div>
</div>
<input type="radio" name="category" value="category-6" id="category-6">
<div>
<div>
<h2>Category 6</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
<p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
<p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
<p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
</div>
</div>
</div>
</div>https://jsfiddle.net/gRoberts/84zfbu0j/
Only one pane is designed to show at any one time, so it uses css transitions to hide/show the inactive/active panes, which all works fine but I believe that at the point of focus, the browser scrolls to the element as it’s transitioning causing it jump down the page.
I’ve tried to prevent the focus event (suggested elsewhere), but this does nothing and using tabindex="-1" will break any accessibility I have with the input.
(($) => {
$(document).on('focus', 'input', (e) => e.preventDefault());
})(jQuery);
Using as little javascript as possible (I am not using jQuery but have used it in the fiddle for brevity), I would like the user to be able to click on the nav on the left to activate the required category but also use the keyboard to navigate back/forth between categories.
I believe the only solution would be to intervene and animate to the top of the element each time the category is changed but it would be good if it could prevent any scrolling on focus.
Any suggestions?
Well, true to form. The minute you try to explain your issue to other people, it makes you think about it in a different way and you find your answer!
.row {
position: relative;
input {
position: absolute;
left: -100%;
top: 0;
opacity: 0;
}
}
As I suspected, it was relative to the input position, which at the point of focus is further down the page causing it to scroll into focus.
Setting the parent element’s position to relative and setting a top position on the absolute input caused them to all be at the top of the parent element, meaning they won’t scroll to focus.