実現したいこと
HTMLの条件によって、表示方向が切り替わる実装のコードを教えて下さい。
・要素①が表示されている時…要素②を表示する
・要素①が表示されていない時…要素②を非表示にする
要素① HTML
<section> <div class="item_box related_item detail_inner_box"> <div class="section_title"> <div class="image_title"></div> </div> <div class="page_contents clearfix related_item_contents standard_slide"> <div class="slider_box slider" data-auto-height="false" data-autoplay="" data-speed="350" data-slides-per-view="2" data-slides-per-group="2" data-use-breakpoints="true" data-max-cols="4"> <div class="itemlist_box inner_slider_box layout_photo"> <div class="item_list swiper-container column2 max_column4 square_photo_layout swiper-container-initialized swiper-container-horizontal swiper-container-pointer-events"> <ul class="swiper-wrapper reset_list_style" id="swiper-wrapper-8aaa12e109ace210e" aria-live="polite"> <li class="swiper-slide slide_item_cell flex_layout list_item_32 swiper-slide-visible swiper-slide-active" role="group" aria-label="1 / 3" style="width: 182.5px;"> <div class="item_data flex_layout"> <a href="リンクURLが入ります" class="item_data_link"> <div class="inner_item_data"> <div class="list_item_photo slider_image_box"> <div class="inner_list_item_photo"> <div class="global_photo item_image_box itemph_related_item_32"> <img src="画像URLが入ります" width="133" style="aspect-ratio: 133 / 200" alt="" data-alt="" class="item_image swiper-lazy swiper-lazy-loaded"> </div> </div> </div> <div class="list_item_data"> <p class="item_name ellipsis"> <span class="goods_name">商品名が入ります</span> <span class="model_number"><span class="bracket">[</span><span class="model_number_value">型番が入ります</span><span class="bracket">]</span></span> </p> <div class="item_info"> <div class="price"> <p class="selling_price"> <span class="figure">5,852円</span><span class="tax_label list_tax_label">(税込)</span> </p> </div> </div> </div> </div> </a> </div> </li> <li class="swiper-slide slide_item_cell flex_layout list_item_32 swiper-slide-visible swiper-slide-active" role="group" aria-label="1 / 3" style="width: 182.5px;"> <div class="item_data flex_layout"> <a href="リンクURLが入ります" class="item_data_link"> <div class="inner_item_data"> <div class="list_item_photo slider_image_box"> <div class="inner_list_item_photo"> <div class="global_photo item_image_box itemph_related_item_32"> <img src="画像URLが入ります" width="133" style="aspect-ratio: 133 / 200" alt="" data-alt="" class="item_image swiper-lazy swiper-lazy-loaded"> </div> </div> </div> <div class="list_item_data"> <p class="item_name ellipsis"> <span class="goods_name">商品名が入ります</span> <span class="model_number"><span class="bracket">[</span><span class="model_number_value">型番が入ります</span><span class="bracket">]</span></span> </p> <div class="item_info"> <div class="price"> <p class="selling_price"> <span class="figure">5,852円</span><span class="tax_label list_tax_label">(税込)</span> </p> </div> </div> </div> </div> </a> </div> </li> <li class="swiper-slide slide_item_cell flex_layout list_item_32 swiper-slide-visible swiper-slide-active" role="group" aria-label="1 / 3" style="width: 182.5px;"> <div class="item_data flex_layout"> <a href="リンクURLが入ります" class="item_data_link"> <div class="inner_item_data"> <div class="list_item_photo slider_image_box"> <div class="inner_list_item_photo"> <div class="global_photo item_image_box itemph_related_item_32"> <img src="画像URLが入ります" width="133" style="aspect-ratio: 133 / 200" alt="" data-alt="" class="item_image swiper-lazy swiper-lazy-loaded"> </div> </div> </div> <div class="list_item_data"> <p class="item_name ellipsis"> <span class="goods_name">商品名が入ります</span> <span class="model_number"><span class="bracket">[</span><span class="model_number_value">型番が入ります</span><span class="bracket">]</span></span> </p> <div class="item_info"> <div class="price"> <p class="selling_price"> <span class="figure">5,852円</span><span class="tax_label list_tax_label">(税込)</span> </p> </div> </div> </div> </div> </a> </div> </li> </ul> <div class="slider_controller lower_slider_controller"> <div class="swiper-button-prev swiper-button-disabled" tabindex="-1" role="button" aria-label="Previous slide" aria-controls="swiper-wrapper-8aaa12e109ace210e" aria-disabled="true"><span class="inner-button-prev"></span></div> <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets"><span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button" aria-label="Go to slide 1"></span><span class="swiper-pagination-bullet" tabindex="0" role="button" aria-label="Go to slide 2"></span></div> <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide" aria-controls="swiper-wrapper-8aaa12e109ace210e" aria-disabled="false"><span class="inner-button-next"></span></div> </div> <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span></div> </div> </div> </div> </div> </section>
要素② HTML
<div class="related_items"> <h2> <span class="title_head_space"></span> <span class="title_text">RELATED ITEMS</span> <span class="sample9"><div align="center">関連商品</div></span> <span class="title_end_space"></span> </h2> </div>
こちらの質問が複数のユーザーから「調査したこと・試したことが記載されていない質問」という指摘を受けました。

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/09/26 08:56
2022/09/26 09:15