이미지 버튼 클릭시 지정 위치에 div 불러오기
본문
특정 이미지를 클릭하면 div내용이 나타났다
다시 한번 클릭하면 div내용이 사라지는 소스를 알고 싶습니다
---------------------------------------------------------------------------------------
<div class="translation-links">
<img src="<?php echo G5_IMG_URL?>/gtlogo.gif" width="105px" alt='구글 번역 api'/><br>
<a href="javascript:void(0)" class="korea" data-lang="ko" title="대한민국"><span class="flag kr"></span></a>
<a href="javascript:void(0)" class="netherlands" data-lang="nl" title="네덜란드"><span class="flag nl"></span></a>
<a href="javascript:void(0)" class="germany" data-lang="de" title="독일"><span class="flag de"></span></a>
<a href="javascript:void(0)" class="russia" data-lang="ru" title="러시아"><span class="flag ru"></span></a>
<a href="javascript:void(0)" class="vetnam" data-lang="vi" title="베트남"><span class="flag vn"></span></a>
<a href="javascript:void(0)" class="sweden" data-lang="sv" title="스웨덴"><span class="flag se"></span></a>
<a href="javascript:void(0)" class="spain" data-lang="es" title="스페인"><span class="flag es"></span></a>
<a href="javascript:void(0)" class="usa" data-lang="en" title="미국"><span class="flag us"></span></a>
<a href="javascript:void(0)" class="ukraine" data-lang="uk" title="우크라이나"><span class="flag ua"></span></a>
<a href="javascript:void(0)" class="italy" data-lang="it" title="이탈리아"><span class="flag it"></span></a><br>
<a href="javascript:void(0)" class="indonesia" data-lang="id" title="인도네시아"><span class="flag id"></span></a>
<a href="javascript:void(0)" class="japn" data-lang="ja" title="일본"><span class="flag jp"></span></a>
<a href="javascript:void(0)" class="china" data-lang="zh-CN" title="중국"><span class="flag cn"></span></a>
<a href="javascript:void(0)" class="taiwan" data-lang="zh-TW" title="대만"><span class="flag tw"></span></a>
<a href="javascript:void(0)" class="czech" data-lang="cs" title="체코"><span class="flag cz"></span></a>
<a href="javascript:void(0)" class="philippines" data-lang="tl" title="필리핀"><span class="flag ph"></span></a>
<a href="javascript:void(0)" class="thailand" data-lang="th" title="태국"><span class="flag th"></span></a>
<a href="javascript:void(0)" class="turkey" data-lang="tr" title="터키"><span class="flag tr"></span></a>
<a href="javascript:void(0)" class="portugal" data-lang="pt" title="포르투갈"><span class="flag pt"></span></a>
<a href="javascript:void(0)" class="poland" data-lang="pl" title="폴란드"><span class="flag pl"></span></a>
</div>
------------------
위 소스가 특정이미지를 클릭하면 나타났다 다시 클릭하면 사라지는 소스를 알고 싶습니다
답변 2
다음과 같은 방법도 있으니 참고해 보세요
<style>
.translation-links {
display: none;
}
</style>
<div class="translation-links">
<img src="<?php echo G5_IMG_URL?>/gtlogo.gif" width="105px" alt='구글 번역 api'/><br>
<a href="javascript:void(0)" class="korea" data-lang="ko" title="대한민국"><span class="flag kr"></span></a>
<!-- 나머지 링크들... -->
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var translationLinks = document.querySelector('.translation-links');
var img = document.querySelector('.translation-links img');
// 이미지 클릭 시 이벤트 핸들러
img.addEventListener('click', function () {
if (translationLinks.style.display === 'none') {
translationLinks.style.display = 'block';
} else {
translationLinks.style.display = 'none';
}
});
});
</script>
jquery toggle 을 검색해 보세요..
아래는 간단한 샘플입니다.
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
어떤 형태로든 jquery 파일은 포함시켜 줘야 합니다.
<script>
$(document).ready( function() {
$( 'p.a' ).click( function() {
$( 'p.b' ).toggle( 'slow' );
});
});
</script>
<style>
p.a {
cursor: pointer;
font-weight: bold;
}
</style>
<p class="a">클릭하면 감춰요</p>
<p class="b">내용은 이곳에 넣으세요</p>