从div内的文本设置div宽度

Question

我有一个像这样的div

<div class="hide-show">
    <h3 class="visible-toogle">Hide gallery</h3>
</div>

基本上我已将click事件附加到此div，因此如果用户点击div会发生某些事情，但问题是，如果你看下面的图片，用户可以点击整个div框，

我想限制这一点，因此用户必须单击文本，I.E。角色本身，但我不希望他们能够点击距文本400像素的div。解决这个问题的最佳方法是什么？

---更新---

我刚刚更新了我的HTML，看起来像这样

$( document ).ready(function() {
        $( ".visible-toogle" ).click(function() {
            if($(this).text() == "Show gallery")
            {
                $(this).text("Hide gallery");
            }
            else
            {
                $(this).text("Show gallery");
            }
            $( ".galleria" ).slideToggle( "slow", function() {
            });
        });
    });

和html是这样的

<h3 class="visible-toogle">Hide gallery</h3>

但它仍然具有与我瞄准div

相同的效果