SNS（ツイッター）ボタンが表示されない

Question

前提・実現したいこと

ツイッターボタンを表示したい

発生している問題

ツイッターボタンが表示されない。

今回のケースでは『ツイッターボタンを非表示状態にしておき、クリックイベント発火でツイッターボタンを表示させる』
という実装が前提です。

ただしこの場合ツイッターボタンが表示されません。

調査したところ恐らくツイッターボタン非表示状態を作り出すためにdisplay: none;を設定していることが原因のようです。
例えば非表示状態を作り出すのにvisibility: hidden;やopacity: 0;の場合だと問題なくクリックイベント発火後に表示されることを確認しています。

該当のソースコード

<button class="trigger">クリック</button>
<div class="sns">
  <a href="http://twitter.com/share" class="twitter-share-button" data-text="***" data-url="***" data-lang="ja">Tweet</a>
  <script type="text/javascript" src="http://platform.twitter.com/widgets.js"  charset="utf-8" ></script>
</div>

.sns {
  display: none;
}

試したこと

<button class="trigger">クリック</button>
<div class="sns">
  <a href="http://twitter.com/share" class="twitter-share-button" data-text="***" data-url="***" data-lang="ja">Tweet</a>
  <script type="text/javascript" src="http://platform.twitter.com/widgets.js"  charset="utf-8" ></script>
</div>

.sns {
  visibility: hidden;
}
/* または */
.sns {
  opacity: 0;
}

補足情報

既に判明してる通りツイッターボタンを非表示状態を作り出すためにはdisplay: none;ではなく、visibility: hidden;やopacity: 0;を使用すればこの問題を解消することが分かっているのですが、ツイッターボタン要素の前後にある要素設計を考慮し、可能であれば、display: none;の状態でもクリックイベント発火後に表示させたいのです。

何かいい方法はありますでしょうか？

知見をお伺いできれば幸いです。
よろしくお願いいたします。

クリックイベントコード

$('.trigger').on('click', function() {
  $('.sns').show();
});

Comments

[defghi1977]

clickイベントに対するイベントリスナのコードを追記して下さい

[m.ts10806]

「クリックイベント発火」部分のコード（javascriptだとは思いますが）を追記してください。

[souta-haruran]

失礼しました。javascriptコードを追記しました。

Answer 1

display:noneによるノードの隠蔽は(getComputedStyleメソッドで得られる)スタイル情報が未定義となることから時折スクリプトの動作に影響を及ぼします.

このような場合は代替として

<button class="trigger">クリック</button>
<div class="sns hidden"><!--見えなくする-->
  <a href="http://twitter.com/share" class="twitter-share-button" data-text="***" data-url="***" data-lang="ja">Tweet</a>
  <script type="text/javascript" src="http://platform.twitter.com/widgets.js"  charset="utf-8" ></script>
</div>

.sns.hidden {
  width: 0;
  height: 0;
  overflow: hidden;
}

とした上で, クリックイベント時にクラスhiddenを外すなどすればよいでしょう.

Comments

[souta-haruran]

ありがとうございます。
ご提案いただいた方法で対応をしていきたいと思います。
大変助かりました。