显示/隐藏幻灯片的标题仅适用于第一张幻灯片

Question

I am using a simple jQuery method to show/hide titles in Slick Slider. But for some reason it only works for the first slide.

function myFunction() {
var x = document.getElementById("show");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}

Also adding a class child, only works in first slide too:

function myFunction() {
var x = document.getElementById("show");
var y = x.getElementsByClassName("slide");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.display = "block";
}
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}

Here is what I have:

                 <section id="home-slider">
                 <div class="slick preloading">
                 <?php foreach ( $sliders as $i => $post ) {setup_postdata( $post );                    
                 $my_box = get_post_meta( $post->ID, '_format_video_embed_box', true ); ?>
                 <div class="slide">
                     <div class="video">
                        <div class="screen" id="slick-video-<?php echo my_wrap( $post->ID ); ?>"></div>
                     </div>
                 <div class="bottom">
                 <div class="sub">
                 <?php if ( my_mod( 'slider_layout' ) == 'full' ) { ?>                                  
                 <div class="container">                                    
                 <?php } ?>

<div class="inner">
<button onclick="myFunction()"> Click </button>
<div id="show">

                 <div class="post-author">
                 <?php the_author_posts_link(); ?><a href="<?php the_permalink() ?>"><h3><?php the_title(); ?</h3</a> 
                 </div>
                 <?php if ( my_mod( 'slider_layout' ) == 'full' ) { ?>
                 </div>             

<script>
function myFunction() {
var x = document.getElementById("show");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}</script>
            </div>

                 <?php } ?>
                 </div>
                 </div>
                 </div>
                 </div>
                 <?php } ?>
                 </div>
                 </section>

CSS:

#show{
display:none;
}

How can I achieve to show/hide Titles for all slides or
show/hide titles for each slide with a simple jQuery method.

Answer 1

I sat down... I thought... and I figured it out "... instead of using javascript, why not just applying CSS to achieve my goal... so here it is and its working like a charm! All Slides show/hide with a mouse over.

.bottom {
width: 100%;
height: 0;
bottom: -205px;
text-align: left;
color: #FFF;
z-index: 100;
}
.sub {
-webkit-transform: translate(0, 37%);
transform: translate(0, 37%);
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
opacity: 0;
}
.bottom .inner {
width: 47%;
height: 450px;
margin: 0 0 0 150px;
position: relative;
bottom: 450px;
}

Demo: Slider's title Show and Hide on mouse over